根据两个输入用ajax和php填充select选项

时间:2013-08-19 12:53:21

标签: javascript ajax

我有以下代码......

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

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

我的jquery代码是......

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

我有新代码......见下文......有些想法为什么这也不起作用?

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

1 个答案:

答案 0 :(得分:1)

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

[
{"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},否则脚本将尝试访问未定义的数组元素。

修复了 TYPOS 的代码,虽然我仍然不知道您要使用此代码尝试完成什么(您从未声明目的或期望的最终结果),但这些修复应该是帮助你更近一点。

$('#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
    })