Question

我有2个选择框1是静态选择，2个是基于从一个选择中填充的动态。我正在使用带有php文件的ajax返回多个数组，我想根据select中的选择选择数组。下面是代码。

带有2个选择框的div。

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

没有向第二个选择框提供任何数据。我知道我错过了一些简单的东西。

我正在使用表单的精简版本添加整个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;
                }

    }
    )
}) 
}) ;

Answer 1

你刚刚打了几个拼写错误，并且没有在你的ajax函数中调用.done()。这为我修复了它（假设你的.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;

            }

        }
   )
});

Here's a Fiddle选择器和JSON一起工作。

Answer 2

.val()方法不返回所选option节点的内容。它返回所选value的{{1}}属性的内容。因此，您必须为每个option选项添加value属性。

Answer 3

如果您想创建选择，那么您可以执行以下操作

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

你可以把这个selectdata字符串作为html附加到任何div中，例如＃divid.append（selectdata）或#divID.html（selectdata）

使用多个数组json来填充动态选择

3 个答案: