Каскадное зависимое выпадающее меню не работает - PullRequest
Новая
       15

Каскадное зависимое выпадающее меню не работает

0 голосов
/ 11 мая 2018

У меня проблема с моим каскадным выпадающим списком. Он будет отображать страны просто отлично, но штаты и города не будут отображаться. Он использует jQuery для создания разметки, когда существуют определенные условия. В нем есть выпадающий список страны, штата и города. Когда вы выбираете «Северная Америка», например, все штаты в файле json должны отображаться в выпадающем списке штатов, а затем города. Я не уверен, что я делаю неправильно, но любая помощь приветствуется.

Вот код: 

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Weblesson Tutorial | Dynamic Dependent Dropdown List using Jquery and Ajax</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<br/><br/>
<div class="container" style="width:600px">
    <h2 align="center"> JSON Dynamic Dependent Dropdown List using Jquery and Ajax</h2>
    <br/><br/>
    <select name="country" id="country" class="form-control input-lg">
        <option value="">Select country</option>
    </select>
    <br />
    <select name="state" id="state" class="form-control input-lg">
        <option value="">Select state</option>
    </select>
    <br/>
    <select name="city" id="city" class="form-control input-lg">
        <option value="">Select city</option>
    </select>


</div>

</body>

</html>

<script>
    jQuery(document).ready(function () {

        load_json_data('country');

        function load_json_data(id, parent_id) {
            let html_code = '';
            jQuery.getJSON('ucodes1.json', function (data) {

                html_code += '<option value = ""> Select ' + id + '</option>';
                jQuery.each(data, function (key, value) {
                    if (id === 'country') {
                        if (value.parent_id === '0') {
                            html_code += '<option value="' + value.id + '">' + value.name + '</option>';
                        }
                        else if (value.parent_id === parent_id) {
                            html_code += '<option value="' + value.id + '">' + value.name + '</option>';
                        }
                    }

                });
                jQuery('#' + id).html(html_code);

            });

        }


        jQuery(document).on('change', '#country', function () {
            let country_id = jQuery(this).val()
            if (country_id !== '') {
                load_json_data('state', parent_id);
            } else {
                jQuery('#state').html('<option value="">Select State</option>');
                 jQuery('#city').html('<option value=""> Select City</option>');
            }
        });
        jQuery(document).on('change', '#state', function () {
            let state_id = jQuery(this).val();
            if (state_id !== '') {
                load_json_data('city', state_id)
            } else {
                jQuery('#city').html('<option value="">Select City</option>')
            }
        });
        jQuery(document).on('change', '#city', function () {
            let city_id = jQuery(this).val();
            if (city_id !== '') {
                load_json_data('school', city_id)
            } else {
                jQuery('#city').html('<option value="">Select City</option>')
            }
        });
           });

</script>

Вот проверенный «красивый» файл json: 

[
 {
  "id": "1",
  "name": "North America",
  "parent_id": "0"
},
{
  "id": "2",
  "name": "Canada",
  "parent_id": "0"
},
{
  "id": "3",
  "name": "Australia",
  "parent_id": "0"
},
{
 "id": "4",
 "name": "New York",
 "parent_id": "1"
},
{
 "id": "5",
 "name": "Michigan",
 "parent_id": "1"
},
{
 "id": "6",
 "name": "Texas",
 "parent_id": "1"
},
{
 "id": "7",
 "name": "New York City",
 "parent_id": "4"
},
{
 "id": "8",
 "name": "Albany",
 "parent_id": "4"
},
{
 "id": "9",
 "name": "Mt Vernon",
 "parent_id": "4"
},
{
 "id": "10",
 "name": "Detroit",
 "parent_id": "5"
},
{
 "id": "11",
 "name": "Kalamazoo",
 "parent_id": "5"
},
{
 "id": "12",
 "name": "Ypsilanti",
 "parent_id": "5"
},
{
 "id": "13",
 "name": "Austin",
 "parent_id": "6"
},
{
 "id": "14",
 "name": "San Antoinio",
 "parent_id": "6"
},
{
 "id": "15",
 "name": "Dallas",
 "parent_id": "6"
} 

]

1 Ответ

0 голосов
/ 10 июня 2018

Я получил это работает. Сначала я обновился до jQuery 3.3.1. Этот текущий подход был тестом, но в конечном итоге я хотел получить данные из базы данных веб-API. Я создал учетную запись на mLab и разместил там документы json, скопировал необходимые api uri и использовал его в коде. Код находится на Плункер .

...