1

我想添加 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>
4

1 回答 1

2

您可能需要以下内容。

$('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();

    });

});
于 2013-10-28T05:57:16.680 回答