动态JQuery下拉列表没有'不起作用

Dynamic JQuery Dropdown doesn't work

本文关键字：不起作用 JQuery 下拉列表 动态      更新时间：2023-09-26

我正在尝试创建两个动态下拉列表。第二个下拉列表应该根据我在第一个下拉列表中选择的内容来更改其选项。我已经在这里找到了一个在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>";

有人能指出我在哪里犯了错误吗？谢谢

你有你使用的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>
相关文章：