Question

我想添加7个下拉列表，但每个下拉列表应该在选择上一个下拉列表的值之后。我该怎么办？

这是我的代码。

<html lang="en">
<head>

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $('#1').change(function(){

    $(this).parent().append('#2');

});

  $('#2').change(function(){

    $(this).parent().append('#3');

});

  $('#3').change(function(){

    $(this).parent().append('#4');

});
  </script>
</head>
<body>

<select id="1">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<select id="2" style="display:none;">
  <option value="saab">saab</option>
  <option value="saab">Saab</option>
  <option value="saab">saab</option>
  <option value="saab">saab</option>
</select>

<select id="3" style="display:none;">
  <option value="mercedes">mercedes</option>
  <option value="mercedes">mercedes</option>
  <option value="mercedes">Mercedes</option>
  <option value="mercedes">mercedes</option>
</select>


<select id="4" style="display:none;">
  <option value="audi">audi</option>
  <option value="audi">audi</option>
  <option value="audi">audi</option>
  <option value="audi">Audi</option>
</select>



</body>
</html>

Answer 1

您可能需要以下内容。

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

$(this).parent().append("<select>*insert options here *</select>");

});

但是，根据您的示例代码，我怀疑您更有可能想要以下内容。此外，您需要确保在DOM加载后执行此操作。所以把它包起来：

$(document).ready(function(){

    $('#2').hide();
    $('#3').hide();
    $('#4').hide();

    $('#1').change(function(){

    $('#2').show();

    });


    $('#2').change(function(){

    $('#3').show();

    });

    $('#3').change(function(){

    $('#4').show();

    });

});

选择上一个下拉列值后添加下拉列表

1 个答案: