How to get the selected option value of a drop down box in PHP code

Question

I have a dropdown box which lists a set of logos,like flower,butterfly etc.

<p class="title1">Logo</p>
 <select name="logoMenu" class="select" size="7">
  <?php foreach($logos as $logo):?>
   <option id="<?php echo $logo['Subproperty']['id'];?>" value="<?php echo $logo['Subproperty']['values'];?>"><?php echo $logo['Subproperty']['values'];?>
            </option>
  <?php endforeach;?>
 </select>

Suppose If I select the logo 'Flower' from the drop down box, I want the flower pic to be displayed in a div.This is the div that I have to display the pictures.

<div id="theme_logos" class="float_left spaceleft" style="display:none;">
<?php foreach($defaultLogos as $logo):
     //if($logo['Subproperty']['values']==clicked option value){?>
    <img height="50" width="50" src="/FormBuilder/app/webroot/img/themes/<?php echo $logo['Subproperty']['images'];?>" class="float_left user_profile_image user_profile_image" alt="Default50"/> 
<?php endforeach;?>
</div>

The problem with this code is that it displaya all the pictures found in the table. Because im My controller code, I give only the property id as that of 'Logo',but do not give which logo.

 $this->set('defaultLogos',$this->Subproperty->find('all',array('conditions'=>array('Subproperty.property_id'=>1,'Subproperty.values'=>"Flower"))));

Here I have hard coded as 'flower' so that I get the flower picture alone..

If I select the logo from the drop down box, how to pass that selected value to the controller code? Or if I get the selected logo name thro' jquery,how to use that value in the if condition inside the for each loop?

someone help me out with this.. I'm using CakePHP framework.

   $("#logoMenu option").click(function(){
  selectedLogo=$(this).attr("value");
  $('#subproperty_id').val($(this).attr("id")); 

  if(selectedLogo=="Your logo"){
   $("#themes_upload").show();
  }
  else{
   alert(selectedLogo);
   $("#themes_upload").hide();
   $("#theme_logos").show();
  }
 });

EDIT

Now I have tried an ajax post where I pass the selected logo to the same action of the controller. I get the value when I alert the passed value in the success function of the ajax function. I the picture doesn't appear.

$("#logoMenu option").click(function(){
  selectedLogo=$(this).attr("value");
  $('#subproperty_id').val($(this).attr("id")); 

  if(selectedLogo=="Your logo"){
   $("#themes_upload").show();
  }
  else{
   alert(selectedLogo);
   $.ajax({
       type: "POST",
          url: "http://localhost/FormBuilder/index.php/themes/themes/",
                   async: false,
          data: "selectedLogo="+selectedLogo,
             success: function(msg){
         alert( "Data Saved: " + msg);

     }
   });
   $("#themes_upload").hide();
   $("#theme_logos").show();
  }
 });

 function themes(){ 

     $this->set('themes',$this->Theme->find('all'));
     $logo=$this->params['form']['selectedLogo']; 
     echo "logo:".$logo;  
     $this->set('defaultLogos',$this->Subproperty->find('all',array('conditions'=>array('Subproperty.property_id'=>1,'Subproperty.values'=>$logo))));
 }

But when I trry to display the img in the page,it doesn't appear. Is it because the div show command is after the ajax request?

Answer 1

if you can put the src of image in value of you select option or put attribute of image in hidden div to the value of the item you are showing in select option it will be really easy. Like:

CASE 1) Putting img src in value property of option

<option id="<?php echo $logo['Subproperty']['id'];?>" 
 value="/FormBuilder/app/webroot/img/themes/
                <?php echo $logo['Subproperty']['images'];?>">....</option>

$("#logoMenu").change(function(){
    var logo=$("#logoMenu option:selected").attr("value");
    $("#theme_logos img").hide();
    $("#theme_logos img[src='"+logo+"']").show();
})

CASE 2) Putting image's alt to value in option

<img height="50" width="50" src="..<?php echo $logo['Subproperty']['images'];?>"
      class="..." alt="<?php echo $logo['Subproperty']['values'];?>"/>

<option id="<?php echo $logo['Subproperty']['id'];?>" 
 value="<?php echo $logo['Subproperty']['values'];?>">..</option>

$("#logoMenu").change(function(){
    var alt=$("#logoMenu option:selected").attr("value");
    $("#theme_logos img").hide();//hide any other logo that is showing
    $("#theme_logos img[alt='"+alt+"']").show();//show selected logo
})

EDIT:- Test Code (CASE 2)

<div id="logos">
   <img src="flwrs_1.jpg" alt="1" height="32" width="32" style="display:none;" />
   <img src="flwrs_2.jpg" alt="2" height="32" width="32" style="display:none;" />
   <img src="flwrs_3.jpg" alt="3" height="32" width="32" style="display:none;" />
   <img src="flwrs_4.jpg" alt="4" height="32" width="32" style="display:none;" />
   <img src="flwrs_5.jpg" alt="5" height="32" width="32" style="display:none;" />
</div>
<select id="logo">
   <option id='1' value='1'>1</option>
   <option id='2' value='2'>2</option>
   <option id='3' value='3'>3</option>
   <option id='4' value='4'>4</option>
   <option id='5' value='5'>5</option>
</select>

<script type="text/javascript">
$(document).ready(function(){
     $("#logo").change(function(){
         var i=$("#logo option:selected").attr("value");
         $("div#logos img").hide();
         $("#logos img[alt='"+i+"']").show();
     });
});
</script>