Three dependent lists on jQuery

Question

I needed a dependent drop-down list, I found a similar solution with cities and regions.
I do not know how to make, so that from the selected variety , not only the quantity, but also the length values change?

Currently the amount of the selected grade is changing.

Here is the data file:

<?php $city = array ( 'Местные розы' => array ( 11 => '11 шт. (минимум)', 25 => '25 шт.', 51 => '51 шт.', 101 => '101 шт.', ), 'Эквадорские розы' => array ( 25 => '25 шт. (минимум)', 51 => '51 шт.', 76 => '76 шт.', 101 => '101 шт.', ), ); ?>

At the very beginning of the file:

 <?php require_once('city.php'); // подключаем список с городами $action = isset($_REQUEST['action']) ? $_REQUEST['action'] : ''; // возвращаем список городов if ($action == 'getCity') { if (isset($city[$_GET['region']])) { echo json_encode($city[$_GET['region']]); // возвраащем данные в JSON формате; } else { echo json_encode(array('Выберите количество')); } exit; } // выводим пришедшие данные if ($action == 'postResult') { echo '<pre>' . htmlspecialchars(print_r($_POST, true)) . '</pre>'; exit; } ?>

javascript:

  <script type="text/javascript"> // <![CDATA[ function loadCity(select) { var citySelect = $('select[name="city"]'); citySelect.attr('disabled', 'disabled'); // делаем список городов не активным // послыаем AJAX запрос, который вернёт список городов для выбранной области $.getJSON('index.php', {action:'getCity', region:select.value}, function(cityList){ citySelect.html(''); // очищаем список городов // заполняем список городов новыми пришедшими данными $.each(cityList, function(i){ citySelect.append('<option value="' + i + '">' + this + '</option>'); }); citySelect.removeAttr('disabled'); // делаем список городов активным }); } // ]]> </script>

Accepted Answer · 2016-09-07T07:19:36

Make one more level of nesting in the array, the rest of the server part will not change.

 $city = array ( 'Местные розы' => array ( 'quantity' => array ( 11 => '11 шт. (минимум)', 25 => '25 шт.', 51 => '51 шт.', 101 => '101 шт.', ), 'lengths' => array ( 70 => '70 см', 90 => '90 см', ), ), 'Эквадорские розы' => array ( 'quantity' => array ( 25 => '25 шт. (минимум)', 51 => '51 шт.', 76 => '76 шт.', 101 => '101 шт.', ), 'lengths' => array ( 50 => '50 см', 80 => '80 см', ), ), );

On the js side, fill the resulting two arrays cityList.quantity and cityList.lengths into the appropriate lists (just as you fill in the citySelect )

I would do this: inside a getJSON(...) handler, I would write the following

 // Перебираем массив с ключами в виде имен выпадающих списков $.each(cityList, function(field) { // Получаем нужный список, очищаем его и включаем var fieldElement = $('select[name="' + field + '"]') .empty() .removeAttr('disabled'); // Перебираем массив со значениями пунктов списка $.each(this, function(i) { // Собственно наполняем список зачениями fieldElement.append('<option value="' + i + '">' + this + '</option>'); }); });

In this case, selects corresponding to the number and size should be named according to the keys of the arrays that the server gives (that is, quantity and lengths ).

You can more, if not difficult. I can't figure it out ... - bakusite

Three dependent lists on jQuery

1 answer 1

More articles: