Question

我有这两个表单元素：

<div class="form-group">
    <label for="country" class="col-sm-2 control-label">Country</label>
    <div class='col-md-4'>
        <select name="countryID" id="countryID" class="form-control required populateState">    
            <option value="1"selected="selected">Australia</option><option value="2">New Zealand</option>
        </select>
     </div class='col-md-4'>
</div>
<div class="form-group">
    <label for="state" class="col-sm-2 control-label">State</label>
    <div class='col-md-4'>
        <select name="stateID" id="stateID" class="form-control required stateList">
            <option value="">--</option>
            <option value="1">Australian Capital Territory</option>
            <option value="2">New South Wales</option>
            <option value="3">Northern Territory</option><option value="4">South Australia</option>
            <option value="5">Tasmania</option>
            <option value="6">Queensland</option>
            <option value="7">Victoria</option>
            <option value="8">Western Australia</option>
        </select>
    </div class='col-md-4'>
</div>

选择#countryID时。我想通过遍历DOM然后返回到下一个选择字段来更新#stateID。这是我的jQuery，我认为应该可以工作，但由于某种原因没有。任何人都可以看到我做错了什么，或者我可以更好地遍历DOM而不是我在这里做的事情？

$(".populateState").on('change',function(){ 
        var targetSelect = $(this).closest('.form-group').next('.form-group').children('.stateList');           
        targetSelect.html('<option>HELLO</option>');
    });

谢谢！

Answer 1

.stateList不是.form-group的直接子项，子项只查找直接子元素（可能是您的标签或div）。请改用find：

var targetSelect = $(this).closest('.form-group').next('.form-group').find('.stateList');

Answer 2

Tr this：

$(".populateState").on('change',function(){

        var targetSelect = $(this).closest('.form-group').next('.form-group').find('.stateList');

        targetSelect.append('<option>HELLO</option>');

    });

Answer 3

您有选择ID，为什么不使用它？它更快 -

试试这个 -

$(".populateState").on('change',function(){

        var targetSelect = $("#stateID");

        targetSelect.html('<option>HELLO</option>');

    });

演示 - http://jsfiddle.net/RahulB007/qcwtphd8/

Answer 4

你错过了该课程包含几个CSS。

试试这个：

$(document).ready(
   function() {
      $("select[class*='populateState']").on('change',
         function() { 
            var targetSelect = $(this).parent().parent().next().find("select[class*='stateList']");

            targetSelect.html('<option>HELLO</option>');
    });
   }
);

谢谢，

jquery遍历到下一个表单元素

4 个答案: