JQuery Добавить значения для выбора параметров

У меня есть этот вариант в течение многих дней, но я не мог найти решение.

Я хочу:

  1. У меня есть два окна выбора
  2. В первом окне выбора указаны названия стран
  3. Второй флажок выбора пуст

Я хочу, когда я выбираю какую-либо страну (например, Соединенное Королевство) из первого окна выбора, должен выполняться запрос php, чтобы получить название всех городов из таблицы, а затем добавить их во второй поле выбора с помощью JQuery.

благодаря

предположение

  • У вас есть сценарий («/getCities.php»), который принимает параметр («страна»), который является идентификатором страны, в которой вы хотите, чтобы города и выходы 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, который укажет вам в правильном направлении.