jQuery HTML操作不適用於選擇輸入

Question

請參考http://jsfiddle.net/7FfMd/6/

運行代碼，然后從下拉列表中選擇“ E”，出現另一個輸入框，但是我無法從第二個輸入中選擇選項B。

我該如何解決。

由於某種原因，當我再次從第一個輸入中選擇選項“ D”時，第二個選擇框也不會更新。

謝謝

Answer 1

這是因為您在兩個下拉列表周圍的div上捕獲了change事件。 當您更改第二個下拉菜單時，將觸發事件處理程序，並從您選擇的地方刪除該下拉菜單，然后將其替換為新的下拉菜單。

如果要將更改事件綁定到父元素，則需要檢查在哪個下拉列表中進行了更改（使用event.target ），以免重新創建所有下拉列表。 如果使用delegate來綁定事件處理程序， this它將包含進行更改的元素：

jQuery('.change').delegate('select', 'change', function() { ... });

為每個選擇綁定事件可能更簡單，因此您不必檢查導致事件的下拉列表。 如果您使用delegate ，即使該元素尚不存在，您也可以綁定該事件，但是您需要在下拉菜單中放置一個類，名稱或ID，以便可以識別它們：

jQuery('.change').delegate('#firstDropdown', 'change', function() { ... });
jQuery('.change').delegate('#secondDropdown', 'change', function() { ... });

Answer 2

您沒有得到輸入的val ，但是得到了包含輸入的div的val ：

var testVar= jQuery('#placeholder2').val();

應該

var testVar = jQuery('#placeholder2 select').val();

同樣， change訂閱者應僅處於選擇狀態，而不是div（以避免更改第二個select時觸發事件）：

jQuery('.change').change(function() {

應該

jQuery('.change select').change(function() {

有關更新版本， 請參見此處 。

Answer 3

問題是您已將change事件處理程序綁定到包含兩個<select>元素的<div> <select>元素。 每當您更改這些<select>元素中的任何一個時，change事件就會冒泡到<div> 。 這對於第一個來說效果很好，但是當您更改第二個效果時，它將再次觸發該代碼並替換整個<select>元素。

Answer 4

那是因為您正在使用

var testVar= jQuery('#placeholder2').val();

這會嘗試從div中獲取.val() ，而不是從select中獲取。 嘗試這個：

var testVar= jQuery('#placeholder2 select').val();

Answer 5

不要忘記，當您添加新元素時，以前應用的方法將不會被應用到它們。

您將需要將事件代碼應用於新元素。

Answer 6

您正在創建一個具有.change類的div。 因此，功能由其子項的所有更改處理。

看一下這段代碼：

http://jsfiddle.net/7FfMd/13/

Answer 7

您的jquery錯誤。 這是我的答案標記如下

<div class='change'>
    <div id="placeholder2" style="width:600px;">
        <select>
            <option selected="selected">D</option>
        <option >E</option>
        </select>
    </div>
    <div id="placeholder" style="width:600px;"></div>
</div>

jQuery應該是這樣的。

jQuery('#placeholder2>select').change(function(){   
    var testVar= $(this).val();
    alert(testVar);
    if (testVar == "D")
    {
        var htmlString = '<select><option>C</option></select>';
        jQuery('#placeholder').html(htmlString);
    } else
    {
        var htmlString = '<select><option>A</option><option>B</option></select>';
        jQuery('#placeholder').html(htmlString);
    }
});