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 I select the logo 'Flower' from the drop down box, I want the flower picture 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 displays all the pictures found in the table. Because in 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 'flower' so that I only get the flower picture.

If I select the logo from the drop down box, how can I pass that selected value to the controller code? Or if I get the selected logo name using jQuery, how can I use that value in the if condition inside the foreach loop?

I am using the 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 but 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))));
}

When I try to display the image in the page, it doesn't appear. Is it because the div show command is after the AJAX request?

Solution

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>

Comments

[Graviton]

Should you not use AJAX for this?

[Jani Hartikainen]

It's not clear if you want to do this using Ajax or just form submitting

[Angeline]

I want to stay in the same page,so I do not want form submitting. If I select a particular logo,its image should be displayed. TheVillageIdiot's answer sounds sensible,but it doesn't work out.

[Angeline]

Will sending an ajax post to the same page work?

[TheVillageIdiot]

If the images are really small and don't slow initial loading then you don't need ajax.

[Angeline]

I get the value in the i variable. But the image doesn't appear.. Can u explain the line $("#logos img[alt='"+i+"']").show(); Its function?

[TheVillageIdiot]

Lets say $("#logo option:selected").attr("value") returns foobar. then this line will be: $("#logos img[alt='foobar']") it will select image having alt attribute value 'foobar' in div with logos.

[Angeline]

i even hard coded the value,i.e., gave img[alt='Flower'] and also gave the alt attribute value as Flower. Still I dont get the image.Plz help me..

[TheVillageIdiot]

@Angeline I've not used php for long and don't have complete setup to test your solution right now. Please send me your code email me at aman dot tur at gmail or better upload it to some file sharing site (like mediafire.com) and email me link. It is not that difficult it should work easily, there seems to be something else that is wrong.

[Angeline]

k,i'll mail you my code. But there is a slight improvement in the results right now. I get all the images in the table instead of just the one I clicked.