如何获取PHP代码中下拉框中选定的选项值 [英] How to get the selected option value of a drop down box in PHP code

问题描述

我有一个下拉框，其中列出了一组徽标，如花，蝴蝶等。

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>

假设我从下拉框中选择标志花，我想要花图显示在div中。这是我必须显示图片的div：

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>

此代码的问题是它显示表中找到的所有图片。因为在我的控制器代码中，我只给出了Logo的属性ID，但不给出哪个标志。

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.

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

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?

我正在使用 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();
    }
});

编辑：

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

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

当我尝试在页面中显示图像时，它不会显示。这是因为div show命令是在AJAX请求之后的吗？

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?

推荐答案

如果可以将图像的src放在你的价值选择选项或将图像的属性放在隐藏的div中，使其在select选项中显示的项目的值将非常容易。喜欢：

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:

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

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）将图像的alt值设置为选项

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

编辑： - 测试代码（CASE 2） / p>

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

这篇关于如何获取PHP代码中下拉框中选定的选项值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！