代码之家 › 专栏 › 技术社区 › Anar Bayramov

如何根据jquery中的值打开child的child

html jquery javascript

Anar Bayramov · 技术社区 · 10 年前

嗨,我知道这个问题被问了好几千次,但我想我犯了一个错误

我尝试根据子项的值打开选择框,如果子项值为('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>

3 回复 | 直到 10 年前

Yass 10 年前

当您在第二个组合框上进行选择时,您需要找到所选的 option 。您的代码中也有错别字-请参阅更新后的fiddle以了解工作示例。

考虑到以上内容,您的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();
  }
});

charlietfl 10 年前

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

这些与使用 $(function() 或 $(document).ready(function() 两者都是一回事

尝试更改

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

到

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

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

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

Shravan Ramamurthy 10 年前

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