Question

我正在通过选择下拉列表中的第一个选项来处理3个下拉1，drop down2到目前为止动态填充了这些选项。但是在第二次下拉选择选项时，问题就出现了第三次下拉没有填满。

<!DOCTYPE html>

<html>
<head>
<script src="jq.js" type="text/javascript"></script>
<script>

$(document).ready(function() {

    $("#st").click(function() {
        $("#ds").html('<option id="dsp">1</option><option>3</option><option>4</option>');
    });

    $("#dsp").click(function() {

        $("#plc").html('<option>1</option><option>3</option><option>4</option>');
        alert("hi");
    });


});
</script>

<title>TODO supply a title</title>

</head>
<body>
<select>
    <option id="st">1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>

<select id="ds">

</select>

<select id="plc">

</select>
</body>
</html>

Answer 1

如果要绑定（单击）-events以动态添加元素，则应使用：

$('[parent-element]').on('click', '[target-element]', function() { // do something });

这会产生类似

的内容

$('#ds').on('click', '#dsp', function() { // do something });

因为选择器无法使用$([element/id/class])方法识别元素。

Answer 2

您需要使用此类更改

＆＃13;

$("#first").on('change', function() {
  if ($(this).children(":selected").attr("id") == 'st') {
    $("#ds").html('<option id="dsp">1</option><option>3</option><option>4</option>');
  }
});

$("#ds").on('change', function() {
  if ($(this).children(":selected").attr("id") == 'dsp') {
    $("#plc").html('<option>1</option><option>3</option><option>4</option>');
  }
});
$("#plc").on('change', function() {
  alert("This Works");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id="first">
  <option id="st">1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>
<select id="ds"></select>
<select id="plc"></select>

＆＃13;

Answer 3

将项目添加到DOM后，您还需要另外设置事件处理程序。

因此，当项目被添加时，您还需要重新添加点击处理程序：

$(document).ready(function() {
        $("#st").click(function() {
            $("#ds").html('<option id="dsp">1</option><option>3</option><option>4</option>');
            $("#dsp").click(function() {

                $("#plc").html('<option>1</option><option>3</option><option>4</option>');
                alert("hi");
            });
        });           
    });

Answer 4

在change上使用select事件来运行您的代码。另外，请在id上指定select，而不是option。

JQuery的：

$("#st").on("change", function() {
    ...
});

$("#ds").on("change", function() {
    ...
});

HTML ：

<select id="st">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>

<select id="ds">
..
</select>

<select id="plc">
..
</select>

Answer 5

不使用option元素上的ID，最好使用这些值。如果用户将值更改回不是目标值的值，则需要重新填充下一个select。最后，您希望选择在页面加载时加载 RIGHT - 在第一个和第二个上使用.change()。

change上的select事件是您需要使用的事件，而不是click事件：

$("#first").on('change', function() {
    $("#ds").html( this.value === '1' ? '<option>1</option><option>3</option><option>4</option>' : '');
})
.change();

$("#ds").on('change', function() {
    $("#plc").html(this.value === '1' ? '<option>1</option><option>3</option><option>4</option>' : '');
})
.change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id="first">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>
<select id="ds"></select>
<select id="plc"></select>

将<option>元素与id一起动态添加到<select>并使用添加的id </select> </option>

5 个答案: