jquery的遍歷下一形式元件

我有這兩個表格元素：jquery的遍歷下一形式元件

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

謝謝！

來源

2014-12-05 Jason

看答案會很簡單..但是你通過遍歷了DOM然後回落到下一個選擇欄的意思是什麼？ – 2014-12-05 04:35:51

.stateList不是.form-group的直接子女，孩子只會尋找直接子元素（這將是您的標籤或div）。使用find代替：

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

來源

2014-12-05 04:03:49

發現它是......感謝喬！ – Jason 2014-12-05 06:51:18

TR這：

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

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

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

    });

來源

2014-12-05 04:05:32 ArinCool

您具有選擇一個ID，爲什麼不利用呢？它是這樣faster-

嘗試this--

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

     var targetSelect = $("#stateID"); 

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

    });

人口統計學http://jsfiddle.net/RahulB007/qcwtphd8/

來源

2014-12-05 04:06:51 RahulB

謝謝Rahulb，我想在幾個地方使用監聽器，可能在同一頁上倍數多，因此使用class .. – Jason 2014-12-05 06:53:07

你錯過了這個類包含幾個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>'); 
    }); 
    } 
);

謝謝

來源

2014-12-05 04:40:26 Jedi

jquery的遍歷下一形式元件

回答

相關問題