Question

拥有此代码，我想将其转换为能够允许用户选择任何可能的选择并让div [id='setprice']显示或该效果。目前我有4个选项，但最多10个选项取决于数据库中的数量。但它应该没关系，我只想要选择哪个打开setprice div。感谢。

$("#category").change(function () {

   $("#setprice").hide();

     if ($(this).val() == "cow") { $("[id='setprice']").show(); }
else if ($(this).val() == "dog") {  $("[id='setprice']").show(); }
else if ($(this).val() == "monkey") {  $("[id='setprice']").show(); }
else if ($(this).val() == "kungfoo") {  $("[id='setprice']").show(); }
  });

HTML

<select id="category">
    <option value=''>Select</option>
    <option value='cow'>Cow</option>
    <option value='dog'>Dog</option>
    <option value='monkey'>Monkey</option>
    <option value='kungfoo'>kungfoo</option>
</select>

<div id='setprice'>this is hidden onload, then shows on any #category selection</div>

似乎有很多关于我要问的问题，我给出的这些选项是随机名称，将要加载的类别来自数据库，可以添加更多，具体取决于它如何扩展，所以我想要脚本不显示div = setprice，但在#category中选择任何内容以打开setprice。

Answer 1

只有当选择框的值不为空时，才需要调用该函数。

$("#category").change(function () {
   $("#setprice").toggle(!!this.value);
 });

Here是一个工作小提琴。

这是最干净的。

Answer 2

<强> DEMO

$("#category").change(function () {
   $("#setprice").toggle(!!this.value);
});

$("#setprice").toggle(!!this.value);只是在boolean方法中使用.toggle()的方法，

否则你也会这样做：

var $setPriceEl = $("#setprice");
$("#category").change(function () {
   $setPriceEl.hide();                // hide by default
   if(this.value) $setPriceEl.show(); // show only if has value
});

甚至：

$("#category").change(function () {
   $("#setprice")[this.value ? "show" : "hide" ]();
});

Answer 3

请在下面找到答案......

HTML :

 <select id="category">
    <option value=''>Select</option>
    <option value='cow'>Cow</option>
    <option value='dog'>Dog</option>
    <option value='monkey'>Monkey</option>
    <option value='kungfoo'>kungfoo</option>
 </select>

 <div id='setprice' style="display:none;">this is hidden onload, 
 then shows on any #category selection</div>

JQUERY :

$(document).ready(function(){

    $("#category").change(function() {
        $("#category option:selected" ).each(function() {
            var str = $( this ).text();
            if(str == "Select"){
                $("#setprice").hide();
            }else{
                $("#setprice").show();
                $("#setprice").text(str);
            }
        });

    }).trigger("change");
});

jquery更改函数隐藏和显示div

3 个答案: