jQuery将值添加到选择选项

Question

我已经用谷歌搜索了很多天，但是找不到解决方案。

我想要的是：

1. 我有两个选择框
2. 首先选择框具有国家名称
3. 第二选择框为空

我想要的是，当我从第一个选择框中选择任何国家（即英国）时，应运行php查询以从表中获取所有城市的名称，然后使用Jquery将它们添加到第二个选择框中。

谢谢

Answer 1

假设

• 您有一个脚本（“ /getCities.php”），该脚本带有一个参数（“ country”），该参数是您想要城市所在的国家/地区的ID，并输出如下所示的JSON：

   {"Cities": [ { "ID": 1, "Name": "New York" }, { "ID": 2, "Name": "Los Angeles" } ]} 

  （您可以使用JSONLint来验证您的JSON。）

然后也许遵循以下思路：

<select id="Countries">
    <!-- omitted -->
</select>
<select id="Cities"></select>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    // when a new country is selected...
    $("#Countries").change(function() {
      // ...clear existing cities...
      $("#Cities").empty();
      // ...and repopulate cities based on JSON data.
      $.getJSON( "/getCities.php",
      // pass the selected country ID
        {
          country: $("#Countries").val()
        },
        function(data) {
          $.each(data.Cities, function(n, city) {
              // add a new option with the JSON-specified value and text
              $("<option />").attr("value", city.ID).text(city.Name).appendTo("#Cities");
          });
        }
      );
    }); // $("#Countries").change(function() { ... });
  }); // $(document).ready(function() { ... });
</script>

Answer 2

尝试这个。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript">
    function moveItem() {
        $("#target").append($("#source").find(':selected'));
    }
</script>

<select id="source" size="3">
    <option>option1</option>
    <option>option2</option>
    <option>option3</option>    
</select>

<button onclick="moveItem()">Move Item</button>

<select id="target" size="3"></select>

Answer 3

“级联下拉菜单”是如此常见的界面-我很难相信您找不到任何示例。 这是一个PHP示例 ，它将为您指明正确的方向。