CODEWITHSUNDEEP
javascriptjqueryarraysjson
user1554967
user1554967

Reputation: 121

using a multiple array json to populate dynamic select

I have 2 select boxes 1 being static choices and 2 being the dynamic being populated based on the choice from one. I am using ajax with a php file that returns multiple arrays and I want to choose the array based on the choice from select 1. Below is the code.

The div with the 2 select boxes.

<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>

Here is the jquery function.

$("#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;

            }

        }
   }
   )

Here is the json data.

{"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"}
]
}

It is not feeding any data to the 2nd select box. I know its something simple I missed.

I am adding the stripped down version of entire php file with the stripped down version of the form because it is a static long form. Maybe there is something I am missing in the code.

<!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>

I finally settled on the function. Thanks to all you for your input.

$(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;
                }

    }
    )
}) 
}) ;

Upvotes: 0

Views: 2994

Answers (3)

Rodney G
Rodney G

Reputation: 4826

You just had a couple typos and didn't call .done() in your ajax function. This fixed it for me (assuming your .php actually returns 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;

            }

        }
   )
});

Here's a Fiddle of the selectors and JSON working together.

Upvotes: 1

Vinay Sharma
Vinay Sharma

Reputation: 1303

if you want to create select then you can do something like as following 

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

and you can append this selectdata string into any div as html for example #divID.append(selectdata) or #divID.html(selectdata )

Upvotes: 0

hindmost
hindmost

Reputation: 7195

.val() method doesn't return content of selected option node. It returns content of value attribute of the selected option. So you have to add value attribute to each select's option.

Upvotes: 0

Related Questions