php 如何在PHP代码中获取下拉框的选定选项值

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

提问by Angeline

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 中。这是我必须显示图片的div：

<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.

这段代码的问题在于它显示了表中找到的所有图片。因为在我的控制器代码中，我只给出了“徽标”的属性 ID，但没有给出哪个徽标。

$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?

如果我从下拉框中选择徽标，如何将所选值传递给控制器​​代码？或者，如果我使用 jQuery 获得选定的徽标名称，我如何在 foreach 循环内的 if 条件中使用该值？

I am using the CakePHPframework.

我正在使用该CakePHP框架。

$("#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.

现在我尝试了 AJAX POST，我将选定的徽标传递给控制器​​的相同操作。当我在ajax函数的成功函数中提醒传递的值时，我得到了该值，但图片没有出现。

$("#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?

当我尝试在页面中显示图像时，它没有出现。是因为 div show 命令是在 AJAX 请求之后吗？

回答by TheVillageIdiot

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:

如果您可以将图像的 src 放在您选择选项的值中，或者将隐藏 div 中的图像属性放入您在选择选项中显示的项目的值，那将非常容易。喜欢：

CASE 1) Putting img src in value property of option

案例 1) 将 img src 放在选项的 value 属性中

<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

案例 2) 将图像的 alt 设置为选项中的值

<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)

编辑：- 测试代码（案例 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>