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

Я много дней гуглил эту опцию, но не мог найти решения.

Я хочу:

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

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

Спасибо


javascript php jquery select
person air    schedule 30.09.2009    source источник
comment
Несколько соображений: - Ваш код на стороне сервера должен кэшировать списки городов - Ваш javascript на стороне клиента должен кэшировать результаты запроса - Вы должны предварительно загрузить свою страницу с городами для 2 или 3 наиболее выбранных стран Между ними эти меры значительно уменьшат количество обратных вызовов сервера и обращений к базе данных.   -  person Hugh Bothwell    schedule 01.10.2009

Ответы (3)


arrow_upward
5
arrow_downward

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

  • У вас есть скрипт ("/getCities.php"), который принимает параметр ("country"), являющийся идентификатором страны, в которой вы хотите видеть города, и выводит JSON, который выглядит следующим образом:

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

    (Для проверки JSON можно использовать JSONLint.)

Тогда, может быть, что-то в этом роде:

<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>
person Lobstrosity    schedule 30.09.2009
comment
Спасибо, Lovely Ans, за то, что я искал... Еще раз спасибо, вы сильно различаетесь - person air; 01.10.2009

arrow_upward
0
arrow_downward

попробуй это.

<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>
person Lance Rushing    schedule 30.09.2009

arrow_upward
0
arrow_downward

«Каскадное выпадающее меню» — такой распространенный интерфейс — мне трудно поверить, что вы не смогли найти ни одного примера. Вот пример PHP, который укажет вам правильное направление.

person Peter J    schedule 30.09.2009