Javascript 根据选择显示或隐藏div

我有一个html选择

 <select class="form-control" data-val="true" data-val-number="The field
 CodeSetup must be a number." id="CodeSetup" name="CodeSetup">
<option selected="selected" value="0">AllCodes</option>   
<option value="1">ClientCodes</option>
<option value="2">EmployeeClass</option>
</select>

<div id="eeclass">
      <div class="row setup-code-edit">
       <label class="control-label col-md-5 label-blue-small" for="EEClassCodes">EEClassCodes</label>
         <div class="col-md-7">
  <input class="form-control" id="EEClassCodes" name="EEClassCodes" type="text" value="">
         <span class="field-validation-valid text-danger" data-valmsg-for="EEClassCodes" data-valmsg-replace="true"></span>
                            </div>
                        </div>
                    </div>

这会在选择时显示隐藏字段，但不会专门针对选择EmployeeClass选项（value=“2”）的人执行此操作。它只是显示它，而不考虑变化

---

我还需要它在取消选择值时隐藏字段。这里有开关好吗？我尝试过切换，但似乎操作不正确。

是否仅当select的值为

2

时才显示它

$(document).ready(function() {
        $('#eeclass').hide();
        $("#CodeSetup").change(function () {
            if($(this).val() == 2) {
               $('#eeclass').show();
            } else {
               $('#eeclass').hide(); /* If you want to be hidden if it's not */
            }
        });

    })

---

是否仅当select的值为

2

时才显示它

$(document).ready(function() {
        $('#eeclass').hide();
        $("#CodeSetup").change(function () {
            if($(this).val() == 2) {
               $('#eeclass').show();
            } else {
               $('#eeclass').hide(); /* If you want to be hidden if it's not */
            }
        });

    })

---

是的，你想要开关。与某人交往

$("#CodeSetup").change(function () {
  $('#eeclass').toggle($(this).val()==2); // or this.value==2
});

---

是的，你想要开关。与某人交往

$("#CodeSetup").change(function () {
  $('#eeclass').toggle($(this).val()==2); // or this.value==2
});

试一试

<select class="form-control" data-val="true" data-val-number="The field
     CodeSetup must be a number." id="CodeSetup" name="CodeSetup">
    <option selected="selected" value="0">AllCodes</option>   
    <option value="1" data-div="eeclass0">ClientCodes</option>
    <option value="2" data-div="eeclass1">EmployeeClass</option>
    </select>

试一试

<select class="form-control" data-val="true" data-val-number="The field
     CodeSetup must be a number." id="CodeSetup" name="CodeSetup">
    <option selected="selected" value="0">AllCodes</option>   
    <option value="1" data-div="eeclass0">ClientCodes</option>
    <option value="2" data-div="eeclass1">EmployeeClass</option>
    </select>

---

您希望在每次选择更改时隐藏它（如果用户选择2，然后改变主意选择1），然后如果选择为2，则显示

$(document).ready(function() {
    $('#eeclass').hide();
    $("#CodeSetup").change(function () {
        $('#eeclass').hide(); //always hide on change
        if($(this).val() == 2) {
             $('#eeclass').show(); //show only if value is 2
        }
    });
});

或者躲在别的地方

$(document).ready(function() {
    $('#eeclass').hide();
    $("#CodeSetup").change(function () {
        if($(this).val() == 2) {
             $('#eeclass').show(); //show if value is 2
        }
        else {
            $('#eeclass').hide(); //hide if value is not 2
        }
    });
});

---

我想说这两种情况都可以，但可以讨论。

每次选择更改时都要隐藏它（如果用户选择2，然后改变主意选择1），然后如果选择2，则显示

$(document).ready(function() {
    $('#eeclass').hide();
    $("#CodeSetup").change(function () {
        $('#eeclass').hide(); //always hide on change
        if($(this).val() == 2) {
             $('#eeclass').show(); //show only if value is 2
        }
    });
});

或者躲在别的地方

$(document).ready(function() {
    $('#eeclass').hide();
    $("#CodeSetup").change(function () {
        if($(this).val() == 2) {
             $('#eeclass').show(); //show if value is 2
        }
        else {
            $('#eeclass').hide(); //hide if value is not 2
        }
    });
});

我想说这两种情况都可以，但可以讨论。

你可以试试这个 HTML

你可以试试这个 HTML

---

在您的示例中，

$（'#eeclass'）

在哪里？

if（this.value==2）

？在您的示例中，

$（'#eeclass'）

在哪里？

if（this.value==2）

？不确定这是否真的是一个性能问题，但

this.value==2

会更简单吗？是的。非常微不足道。我看不出这是一个循环。老实说，我不知道使用value属性在任何方面是否有用。

val（）

只是返回value属性，还是有更多类似于数据清理之类的内容？我经常使用this.id而不是$（this.attr（“id”）或$（this.prop（“id”），因为它更容易阅读。但是如果我使用jQuery获取值，我会坚持使用.val（）。我不确定这是否真的是一个性能问题，但是

this.value==2

不是更简单吗？是的。非常微不足道。我看不出这是一个循环。老实说，我不知道使用value属性在任何方面是否有用。

val（）

只是返回value属性，还是有更多类似于数据清理之类的内容？我经常使用this.id而不是$（this.attr（“id”）或$（this.prop（“id”），因为它更容易阅读。但是我坚持使用.val（），如果我使用jQuery获取valuesSorry，我只是键入了错误的单词，是的，I ment show；）对不起，我刚打错字，是的，我错了；）以防已经显示。你可以隐藏在其他地方，但我可以看到这两种情况的优点和缺点。你可以隐藏在其他方面，但我可以看到这两种情况的利弊。