jqueryhtml操作不适用于select输入

jquery html manipulation does not work on the select inputs

本文关键字：select 输入 适用于 不适用 操作 jqueryhtml      更新时间：2023-09-26

请参阅http://jsfiddle.net/7FfMd/6/

运行代码，然后从下拉菜单中选择"E"，会出现另一个输入框，但我无法从第二个输入中选择选项B。

我该怎么修？

出于某种原因，当我再次从第一个输入中选择选项"D"时，第二个选择框也不会更新。

感谢

这是因为您在围绕两个下拉菜单的div上捕获了更改事件。当您更改第二个下拉列表时，事件处理程序将被触发，并删除您进行选择的下拉列表，并将其替换为新的下拉列表。

如果要将更改事件绑定到父元素，则需要检查在哪个下拉列表中进行了更改（使用event.target），这样就不会重新创建所有下拉列表。如果使用delegate绑定事件处理程序，this将包含进行更改的元素：

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

为每个选择绑定事件可能更简单，这样就不必检查导致事件的下拉列表。如果您使用delegate，即使元素还不存在，您也可以绑定事件，但您需要在下拉列表中放置一个类、名称或id，以便识别它们：

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

您没有得到输入的val，而是得到了包含输入的div的val：

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

应该是

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

此外，change订阅者应该只在select上，而不是div上（以避免在第二个select更改时触发事件）：

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

应该是

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

请参阅此处获取更新版本。

问题是您已经将change事件处理程序绑定到包含两个<select>元素的<div>元素。无论何时更改这些<select>元素中的任何一个，更改事件都会冒泡到<div>。这对第一个很好，但当您更改第二个时，它会再次启动该代码并替换整个<select>元素。

这是因为您正在使用访问所选值

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

这将尝试从div而不是select中获取.val()。试试这个：

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

不要忘记，当添加新元素时，以前应用的方法将不会应用于它们

您需要将事件代码应用于新元素。

您正在创建一个具有类.change的div。因此，该函数由其子级处理所有更改。

看看这个代码：

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

您的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);
    }
});
相关文章：