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

    })

这显示select上的隐藏字段，但是当有人选择EmployeeClass选项（value =“2”）时，它不会专门执行。无论发生什么变化，它都会显示出来。

取消选择值时，我还需要它来隐藏字段。这里的切换会好吗？我试图切换但似乎没有正确。

Answer 1

您是否只想在选择的值为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 */
            }
        });

    })

Answer 2

是的，你想要切换。和

一起去吧

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

Answer 3

尝试

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

和javascript

 $(document).ready(function() {
        $('.EEClassCodes').hide();
        $("#CodeSetup").change(function () {
            $ ( '#'+$(this).attr('data-div') ).show();
        });

    })

Answer 4

您希望每次选择更改时隐藏它（如果用户选择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
        }
    });
});

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

Answer 5

你可以试试这个

HTML

      <head>
        <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
        <link href="style.css" rel="stylesheet" />
        <script src="script.js"></script>
      </head>

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

    </html>

scrpit.js（js）

    $(document).ready(function(){

      $('#EEClassCodes').hide();

      $("#CodeSetup").change(function(){
            if(parseInt($(this).val()) === 2){
              $('#EEClassCodes').show();
            }
            else{
              $('#EEClassCodes').hide();
            }
      });


    })

根据选择显示或隐藏div

5 个答案:

你可以试试这个

HTML

scrpit.js（js）