Question

我正在尝试创建2个动态下拉列表。第二个下拉列表应根据我在第一个下拉列表中选择的内容来更改其选项。我已经在这里发现了一个很好的例子，它可以在JSFiddle上运行。

此处：http://jsfiddle.net/tony089/8hbcP/51/

HTML：

<select id="us_state"></select>
<select id="city_name"></select>

JQUERY：

?>
<script type="text/javascript">

$(document).ready(function() {
var data = {
"State 1": ["City 1", "City 2"],
"State 2": ["City 3", "City 4"],
"State 3": ["City 5", "City 6", "City 7"]
};

var $states = $("#us_state").on("change", function() {
  var cities = $.map(data[this.value], function(city) {
  return $("<option />").text(city);
});

$("#city_name").empty().append(cities);
});
for (var state in data) {
$("<option />").text(state).appendTo($states);
}
$states.change();
$('#us_state').multiselect('refresh');
$('#city_name').multiselect('refresh');
});

</script>
<?

当我采用上面的代码并尝试在我的HTML中运行它时，第一个下拉列表就像它应该是和第二个下拉列表一样，但当我点击第一个下拉列表中的第二个选项时（这应该导致第二个下拉列表更改其值/选项），第二个下拉列表不会使用正确的值更新并保持第一个选项的值。

这就是我的HTML的样子：

$row1 = "
    <tr>
      <td colspan='1' align = 'left';>
        Google Search:<br>
        <select name='filters[]' id='filters' style='width:180px;' size='6'>
        " . $filter_dropdown . "
        </select>
      </td>
      <td colspan='1' align = 'left';>
         Choose State:<br>
        <select id='us_state'>
        </select>
      <br/>
      </td>
      <td colspan='1' align = 'left';>
         Choose City:<br>
        <select id='city_name'></select>
      </td>
      <td colspan='1' align = 'left';>
      </td>       
    </tr>";

有谁能指出我在这里犯错的地方？感谢。

Answer 1

你有使用的jQuery吗？或者你用过这个例子吗？您是否能够向我们显示指向您的页面的链接？：）

修改

这对我有用（你的HTML）：

<html> <head> </head> <body> <table> <tr> <td colspan='1' align = 'left';> Google Search:<br> <select name='filters[]' id='filters' style='width:180px;' size='6'> </select> </td> <td colspan='1' align = 'left';> Choose State:<br> <select id='us_state'> </select> <br/> </td> <td colspan='1' align = 'left';> Choose City:<br> <select id='city_name'></select> </td> <td colspan='1' align = 'left';> </td> </tr> </table> </body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(document).ready(function() { var data = { "State 1": ["City 1", "City 2"], "State 2": ["City 3", "City 4"], "State 3": ["City 5", "City 6", "City 7"] }; var $states = $("#us_state").on("change", function() { var cities = $.map(data[this.value], function(city) { return $("<option />").text(city); }); $("#city_name").empty().append(cities); }); for (var state in data) { $("<option />").text(state).appendTo($states); } $states.change(); $('#us_state').multiselect('refresh'); $('#city_name').multiselect('refresh'); }); </script> </html>

动态JQuery下拉列表不起作用

1 个答案: