использование json с несколькими массивами для заполнения динамического выбора

ProgramBox

использование json с несколькими массивами для заполнения динамического выбора

Post author:admin
Запись опубликована:1 сентября, 2022
Post category:Вопросы по программированию

#javascript #jquery #arrays #json

#javascript #jquery #массивы #json

Вопрос:

У меня есть 2 поля выбора: 1 — статический выбор, а 2 — динамический, заполняемый на основе выбора из одного. Я использую ajax с файлом php, который возвращает несколько массивов, и я хочу выбрать массив на основе выбора из select 1. Ниже приведен код.

Div с 2 полями выбора.

 <div>
<label for="incimechtype">Incident Mechanism Type</label>
<select name="incimechtype" id="incimechtype">
   <option></option>
   <option>Mechanism</option>
   <option>Object</option>
   <option>Other</option>
</select> 
<label for="incimech">Incident Mechanism</label>
<select id="incimech">
</select> 
</div>

Вот функция jquery.

 $("#incimechtype").change(function(){
        var $dropdown = $(this).val();
        $.ajax({
            url: "getinjuryjson.php";
            datatype: "json"
        }).function(data){
            $("#incimech").find("option").remove();
            switch(dropdown){
                case 'Mechanism':
                $.each(data.injmech, function(key,value){
                    $("#incimech").append($('<option/>',{
                        value: value.injmechid,
                        text: value.injmechdescrip
                    }))
                }
                );
                break;
                case 'Object':
                $.each(data.injobject, function(key,value){
                    $("#incimech").append($('<option/>',{
                        value: value.injobjid,
                        text: value.injobjdescrip
                    }))
                }
                );
                break;
                case 'Other':
                $.each(data.injother, function(key,value){
                    $("#incimech").append($('<option/>',{
                        value: value.injotherid,
                        text: value.injotherdescrip
                    }))
                }
                );
                break;

            }

        }
   }
   )

Вот данные json.

 {"injmech":[
{"injmechid":1,"injmechdescrip":"Allergic reaction"},
{"injmechid":2,"injmechdescrip":"Bloodborne"},
{"injmechid":3,"injmechdescrip":"Bugbite"},
{"injmechid":4,"injmechdescrip":"Chemical"},
{"injmechid":5,"injmechdescrip":"Electrical"},
{"injmechid":6,"injmechdescrip":"Employee encounter"},
{"injmechid":7,"injmechdescrip":"Fall"},
{"injmechid":8,"injmechdescrip":"Fire"},
{"injmechid":9,"injmechdescrip":"Fumes"}
],
"injobject":[
{"injobjid":1,"injobjdescrip":"Bed"},
{"injobjid":2,"injobjdescrip":"Cart"},
{"injobjid":3,"injobjdescrip":"Door"},
{"injobjid":4,"injobjdescrip":"Hoyer lift"},
{"injobjid":5,"injobjdescrip":"Maxi lift"},
{"injobjid":10,"injobjdescrip":"Other"},
{"injobjid":6,"injobjdescrip":"Sara lift"},
{"injobjid":7,"injobjdescrip":"Shower"},
{"injobjid":8,"injobjdescrip":"Table"},
{"injobjid":9,"injobjdescrip":"Wheelchair"}
],
"injother":[
{"injotherid":1,"injotherdescrip":"Patient care or tasks assigned to job"},
{"injotherid":2,"injotherdescrip":"Patient encounter"},
{"injotherid":3,"injotherdescrip":"Reoccurrence"},
{"injotherid":4,"injotherdescrip":"Unspecified-unknown"}
]
}

Он не передает никаких данных во 2-е поле выбора.
Я знаю, что это что-то простое, что я пропустил.

Я добавляю урезанную версию всего файла php с урезанной версией формы, потому что это статическая длинная форма. Возможно, в коде чего-то не хватает.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="Monroe Community Hospital" />
<link rel="stylesheet" type="text/css" href="mch.css"/>
<link rel="stylesheet" type="text/css" href="empinc.css"/>
<script type="text/javascript" src="jsstuff/jquery-ui-1.10.4.custom/js/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="jsstuff/jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.min.js"></script>
    <link rel="stylesheet" href="jsstuff/jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.min.css"/>
    <link rel="stylesheet" href="jsstuff/timepick/wvega-timepicker-cc21378/jquery.timepicker.css"/>
    <script type="text/javascript" src="jsstuff/timepick/wvega-timepicker-cc21378/jquery.timepicker.js"></script>
<script type="text/javascript">
    $(function(){
        var options = {
            changeYear: true,
            changeMonth: true
        };
        $(".datepick").datepicker(options);
    })


</script>
<script type="text/javascript">
    $("#incimechtype").change(function(){
    var dropdown = $(this).val();
    $.ajax({
        url: "getinjuryjson.php",
        datatype: "json"
    }).success(function(data){
        $("#incimech").find("option").remove();
        switch(dropdown){
            case 'Mechanism':
            $.each(data.injmech, function(key,value){
                $("#incimech").append($('<option/>',{
                    value: value.injmechid,
                    text: value.injmechdescrip
                }));
            }
            );
            break;
            case 'Object':
            $.each(data.injobject, function(key,value){
                $("#incimech").append($('<option/>',{
                    value: value.injobjid,
                    text: value.injobjdescrip
                }));
            }
            );
            break;
            case 'Other':
            $.each(data.injother, function(key,value){
                $("#incimech").append($('<option/>',{
                    value: value.injotherid,
                    text: value.injotherdescrip
                }));
            }
            );
            break;

        }

    }
)
});
</script>
<title>Employees</title>
</head>

<body>
<form action="/emplincidata.php" method="get">



    <div class="incident">
        <label class="title">TO BE COMPLETED BY EMPLOYEE HEALTH</label>
        <div>
            <label for="incimechtype">Incident Mechanism Type</label>
            <select name="incimechtype" id="incimechtype">
                <option></option>
               <option>Mechanism</option>
               <option>Object</option>
               <option>Other</option>
            </select> 
            <label for="incimech">Incident Mechanism</label>
            <select id="incimech">
            </select> 
        </div>
    </div>
        </form>  

</body>
</html>

Я, наконец, остановился на функции. Спасибо всем вам за ваш вклад.

 $(function(){
$("#incimechtype").change(function(){
    var dropdown = $(this).val();
    $.ajax({
         url:"getinjuryjson.php",
         dataType: "json"  
    }).done( function(data){
         $("#incimech").find("option").remove();
         if(dropdown !== ""){
            $("#incimech").append($('<option/>'));
         }
         switch(dropdown){
                case "Mechanism":

                    $.each(data, function(key,value){
                        if(value.injmech==='Mechanism'){
                            $("#incimech").append($('<option/>',{
                            value: value.injmechid,
                            text: value.injmechdescrip
                            }));
                            }
                    });
                    break;
                case "Other":

                    $.each(data, function(key,value){
                        if(value.injmech==='Other'){
                            $("#incimech").append($('<option/>',{
                            value: value.injmechid,
                            text: value.injmechdescrip
                            }));
                            }
                    });
                    break;
                case "Object":

                    $.each(data, function(key,value){
                        if(value.injmech==='Object'){
                            $("#incimech").append($('<option/>',{
                            value: value.injmechid,
                            text: value.injmechdescrip
                            }));
                            }
                    });
                    break;
                }

    }
    )
}) 
}) ;

1. В чем проблема в настоящее время? Он не передает 2-й выбор с хорошим массивом? Он вообще не загружается?

2. Поскольку вы используете jQuery 1.10, .success() должен быть .done() , как указано в моем комментарии к ответу.

Ответ №1:

У вас просто была пара опечаток, и вы не вызывали .done() свою функцию ajax. Это исправило это для меня (при условии, что ваш .php действительно возвращает JSON):

 $("#incimechtype").change(function(){
        var dropdown = $(this).val();
        $.ajax({
            url: "getinjuryjson.php",
            datatype: "json"
        }).done(function(data){
            $("#incimech").find("option").remove();
            switch(dropdown){
                case 'Mechanism':
                $.each(data.injmech, function(key,value){
                    $("#incimech").append($('<option/>',{
                        value: value.injmechid,
                        text: value.injmechdescrip
                    }));
                }
                );
                break;
                case 'Object':
                $.each(data.injobject, function(key,value){
                    $("#incimech").append($('<option/>',{
                        value: value.injobjid,
                        text: value.injobjdescrip
                    }));
                }
                );
                break;
                case 'Other':
                $.each(data.injother, function(key,value){
                    $("#incimech").append($('<option/>',{
                        value: value.injotherid,
                        text: value.injotherdescrip
                    }));
                }
                );
                break;

            }

        }
   )
});

Вот пример совместной работы селекторов и JSON.

1. Когда я запускаю getinjuryjson.php файл сам по себе, он возвращает данные. Как я могу это проверить?

2. Похоже, вы проверили это. В любом случае, после вашего параметра ajax была ТОЧКА с ЗАПЯТОЙ (;) url . Я просто отредактировал его до ЗАПЯТОЙ (,).

3. Еще одно изменение: .success() устарел с версии jQuery 1.8. Вы должны использовать .done() .

Ответ №2:

.val() метод не возвращает содержимое выбранного option узла. Он возвращает содержимое value атрибута выбранного option . Поэтому вам нужно добавить value атрибут к каждому select параметру.

Ответ №3:

если вы хотите создать select, вы можете сделать что-то вроде следующего

 var selectdata = '<select id="fieldId">';
$.each(data.injobject, function(key,value)
              {
                selectdata = '<option value='  value.injobjid  ' > '  value.injobjdescrip   '<option>';
              });

и вы можете добавить эту строку selectdata в любой div в виде html, например #divID.append(selectdata) или #divID.html (выберите данные )

Метки: использование json с несколькими массивами для заполнения динамического выбора