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

How to open child of child depending on a value in jquery

本文关键字：何根 jquery      更新时间：2023-09-26

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

我尝试打开选择框，具体取决于孩子的值，如果子值是（'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>

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

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

小提琴示例：

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

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

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

尝试更改

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

自 

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

此外，不能将窗体控件事件绑定到<div>

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

$(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 在这里

相关文章：