javascript - 根据选择显示或隐藏 div

Question

我有一个 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>

我有一个 div，其中有一个字段需要在显示某个选项时显示

<input class="form-control" id="EEClassCodes" name="EEClassCodes" type="text" value="">

我正在运行的脚本如下所示:

 $(document).ready(function() {
        $('#eeclass').hide();
        $("#CodeSetup").change(function () {
            $('#eeclass').show();
        });

    })

这显示了选择时的隐藏字段，但并不是专门针对当有人选择 EmployeeClass 选项(value="2")时显示的。它只是显示它而不管变化。

我还需要它在取消选择值时隐藏该字段。在这里切换会很好吗？我尝试切换，但似乎不正确。

Answer 1

您是否只想在 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 */
            }
        });

    })