Question

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

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

假设我从下拉框中选择徽标'Flower'，我希望花卉图片以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>

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

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

这里我有硬编码'花'，所以我只能得到花卉图片。

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

我正在使用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函数的success函数中提醒传递的值但是没有出现图片时，我得到了值。

$("#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请求之后吗？

Answer 1

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

CASE 1）将img src放在option

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

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

编辑： - 测试代码（案例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代码中获取下拉框的选定选项值

1 个答案: