根据两个输入，用ajax和php填充选择选项 [英] according to two inputes populate select option with ajax and php

问题描述

我有以下代码....

<form action="">
    <select class="input-xlarge required" id="inputGender" name="inputGender">
        <option value="">select</option>
        <option value="m">male</option>
        <option value="w">female</option>
    </select>
 <input type="text" class="input" id="DOB" name="DOB">
    <select class="input-xlarge" id="inputWeight" name="inputWeight">
        <option value="">select</option>
    </select>

    <input type="submit" name="action" value="Book" />
</form>

我已经生成了这个JSON文件的data.php文件，在计算了传递的两个参数后只有一个文件... DOB和inputGender ...

the data.php file I have generated this JSON file, only one file after calculating the two parameter passed... DOB and inputGender...

[{"ID":"1", "desc":"(12)"},{"ID":"2", "desc":"(5)"},{"ID":"6", "desc":"(15)"}]

我拥有的jquery代码是...

the jquery code I have is...

$('#inputGender', '#DOB').change(function(){
        $.ajax({
            type: "POST",
            url: "data.php",
            data: {
                gender: $('#inputGender').val()
                dob: $('#DOB').val()
            },
        }).done(function( msg ) {
            var wcs = $.parseJSON(msg);
            console.log(wcs);
            $('#inputWeight').html('');
            $('#inputWeight').append('<option value="">Select</option>');
                $.each(wcs[$(this).val()], function() {
        $persons.append("<option value=" + this.ID_wcl + ">" + this.wcl_desc + "</option>");
            });
        });        
    });
);

我有新代码...见下文...为什么这也行不通?

I have new code ...see below...some idea why this is not working too?

$('#inputGender', '#DOB').change(function(){
                    $.ajax({
                    type: "POST",
                    url: "data.php",
                    data: {
                gender: $('#inputGender').val()
                dob: $('#DOB').val()
            },
                    dataType: 'json',
                    }).done(function( msg ) {
                        var wcs = $.parseJSON(msg);
                            console.log(wcs);
                        $('#inputWeight').html('');
                        $('#inputWeight').append('<option value="">'+'<?=_('[Select]')?>'+'</option>');
                        $.each(wcs, function(){
                            $wc=$(this);
                            $('#inputWeight').append('<option '+selected+' value="'+$wc[0].ID_wcl+'">'+$wc[0].wcl_desc+'</option>');
                        })
                    })        
                })

推荐答案

如果返回的JSON(wcs)如下所示:

If your returned JSON (wcs) looks like this:

[
{"ID":"1", "desc":"(12)"},
{"ID":"2", "desc":"(5)"},
{"ID":"6", "desc":"(15)"}
]

等同于:

[
[0] = {"ID":"1", "desc":"(12)"},
[1] = {"ID":"2", "desc":"(5)"},
[2] = {"ID":"6", "desc":"(15)"}
]

但是在您的 $.each 迭代器中，您使用的索引是 $('#inputWeight')的值.因此，除非 #inputWeight 的值为{0,1,2}，否则脚本将尝试访问未定义的数组元素.

But in your $.each iterator, you're using an index that is the value of $('#inputWeight'). So, unless the values of #inputWeight are {0,1,2}, the script is trying to access undefined array elements.

修正了 TYPOS 的代码，尽管我仍然不知道您要使用该代码完成什么(您从未声明目的或期望的最终结果)，但这些修复应该帮助您拉近距离.

Your code with the TYPOS fixed, and while I still have no idea what you're trying to accomplish with this code (you never state a purpose or a desired end result), these fixes should help you get a little closer.

$('#inputGender', '#DOB')
    .change(function(){
        $.ajax({
            type: "POST",
            url: "data.php",
            data: {
                gender: $('#inputGender').val(), // TYPO
                dob: $('#DOB').val()
            },
            dataType: 'json' // TYPO
        }).done(function( msg ) {
            var wcs = $.parseJSON(msg);
            console.log(wcs);
            $('#inputWeight').html('');
            $('#inputWeight').append('<option value="">'+'<?=_('[Select]')?>'+'</option>');
            $.each(wcs, function(){
                $wc=$(this);
                $('#inputWeight').append('<option '+selected+' value="'+$wc[0].ID_wcl+'">'+$wc[0].wcl_desc+'</option>');
            });  // MISSING SEMICOLON
        });  // MISSING SEMICOLON
    })

这篇关于根据两个输入，用ajax和php填充选择选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！