Javascript 如何根据jquery中的值打开子对象的子对象

嗨，我知道这个问题被问了上千次，但我想在某个地方我犯了一个错误

我尝试打开选择框，这取决于child的值，如果child值为（'COME_LATE'），我将打开child的child

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

；（功能（）{
$（“#缺席”）。关于（'change'，函数（e）{
var el=$（本）；
如果（el.val（）=“无”）
$（“#缺勤类型”）.hide（）；
否则{
$（“#缺勤类型”）.show（）；
}
});
})(); 
;（功能（）{
$（“#缺勤类型”）。关于（'change'，函数（e）{
var el=$（本）；
如果（el.val（）！=='COME\u LATE'）
$（“#课程”）.hide（）；
否则{
$（“#课程”）.show（）；
}
});
})(); 
学生
学生1
学生2
学生3
缺勤类型
迟到
早退
你没来吗
哪一课
1.
2早
3.

当您在第二个组合框上进行选择时，您需要找到所选

选项的值。您的代码中也有一个输入错误-请参阅更新后的fiddle以了解工作示例

考虑到上述因素，您的JQuery将如下所示：


请注意，您正在使用包装jQuery代码

这与使用
$（function（）
或
$（document）.ready（function（）
不同，两者都是相同的

试着改变

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

到

此外，您不能将表单控件事件绑定到

您的第二个选择器应该是
$（“#缺勤类型选择”）

看起来您的大小写不正确。您不应该检查“迟到”吗？啊，很抱歉，我将我的值翻译成了英语，实际上迟到了。我编辑了我的问题，不清楚现在发生了什么。创建一个重现问题的演示。
NONE！=NONE
$（'select'）。val（）
返回与查找所选选项相同的值，使用起来更简单。Op使用
$（this）.val（）
非常简单valid@charlietfl
$（this）.val（）
返回一个空值。@charlietfl在OP的示例“缺勤类型”中是div的
id
。因此，在
change
事件中，
$（this.val（）
返回的值为空，
$（'select'）.val（）
返回1。好吧……我的坏……没有仔细查看id，只是查看第一个，并假设第二个是相同的配置，直到出现问题，因为
更改
只绑定到
而不是它的父项。这就是为什么我说
$（this）.val（）
…选择器应该是
$（“\35;缺勤类型选择”）
;(function () {
   /* your jQuery code */      
})();

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

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