簡體   English   中英

jQuery將值添加到選擇選項

[英]Jquery Add Values to Select Options

我已經用谷歌搜索了很多天,但是找不到解決方案。

我想要的是:

  1. 我有兩個選擇框
  2. 首先選擇框具有國家名稱
  3. 第二選擇框為空

我想要的是,當我從第一個選擇框中選擇任何國家(即英國)時,應運行php查詢以從表中獲取所有城市的名稱,然后使用Jquery將它們添加到第二個選擇框中。

謝謝

假設

  • 您有一個腳本(“ /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>

嘗試這個。

<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>

“級聯下拉菜單”是如此常見的界面-我很難相信您找不到任何示例。 這是一個PHP示例 ,它將為您指明正確的方向。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM