Question

嗨，我知道这个问题被问了几千个时间，但在某个地方我犯了一个错误，我认为

我尝试根据孩子的价值打开选择框，如果孩子的价值是（'COME_LATE'）孩子的开放孩子。

 ;(function () {

        $('#absence').on('change', function (e) {
                var el = $(this);
                if(el.val()==='None')
                    $('#absence_type').hide();
                else {
                    $('#absence_type').show();
                }
            });

    })(); 

 ;(function () {

        $('#absence_type').on('change', function (e) {
                var el = $(this);
                if(el.val() !=='COME_LATE')
                    $('#Lessons').hide();
                else {
                    $('#Lessons').show();
                }
            });

    })(); 


<div class='col-xs-12 col-sm-3'>
<select id="absence" class="form-control">
<option value="NONE" selected>Student</option>    
<option value="1">Student 1</option>
<option value="2">Student 2</option>
<option value="3"> Student 3</option>

</select>
</div>


<div class="col-xs-12 col-sm-3" id="absence_type" style="display:none">
<label>Absence Type</label>
<select class="form-control">
<option value="COME_LATE">COMELATE</option>
<option value="LEFT EARLY">LEFT EARLY</option>
<option value="DIDNT_COME">DIDNT_COME</option>
</select>
</div>




 <div class="col-xs-12 col-sm-3" id="Lesson" style="display:none">
    <label>Which Lesson</label>
    <select class="form-control">
    <option value="1">1</option>
    <option value="2 EARLY">2 EARLY</option>
    <option value="3">3</option>
    </select>
    </div>

Answer 1

当您在第二个组合框中进行选择时，您需要找到所选option的值。你的代码中也有一个拼写错误 - 请参阅更新的小提琴，了解一个工作示例。

考虑到上述情况，您的JQuery将如下所示：

Fiddle example:

$('#absence_type').on('change', function (e) {
  //Find the selected option.
  var el = $(this).find('option:selected');
  if(el.val() !=='COME_LATE')
    $('#Lesson').hide();
  else {
    $('#Lesson').show();
  }
});

Answer 2

请注意，您正在使用IIFE functions来包装jQuery代码。

这些与使用$(function()或$(document).ready(function()不同，这两者都是同一件事

尝试更改

;(function () {
   /* your jQuery code */      
})();

到

$(function() {
   /* your jQuery code */
});

此外，您无法将表单控件事件绑定到<div>

您的第二个选择器应为$('#absence_type select')

Answer 3

$(document)
  .ready(
    function() {

      $('#absence').on('change', function(e) {
        var el = $(this);
        if (el.val() === 'None')
          $('#absence_type').hide();
        else {
          $('#absence_type').show();
        }
      });



      $('#absence_type').on('change', function(e) {

        var el = $(this);
        alert($('#absence_type option:selected').val());
        if ($('#absence_type option:selected').val() !== 'COME_LATE')
          $('#Lesson').hide();
        else {
          $('#Lesson').show();
        }
      });
    });

jsfiddle here

如何根据jquery中的值打开孩子的孩子

3 个答案: