Jquery JSON响应以填充表单中的许多字段

时间:2014-11-21 18:21:22

标签: jquery json

我正在尝试使用json响应并使用它填充表单。我可以很好地填充所有文本字段,但是,我无法获取选择字段来显示json的值。

我的例子是jsfiddle Here

$('#sub').click(function(){

var returnValues = {'name':'Bob','age':'21','favoriteFood':'Spaghetti'};
$.each(returnValues, function(e,i){
    alert(e+i);
    $('#'+e).val(i);
  });
});

<input type='text' id='name'>
<input type='text' id='age'>
    <select name='favoriteFood'>
        <option value=''>
            <option value='Turkey'>Turkey</option>
            <option value='Fish'>Fish</option>
            <option value='Spaghetti'>Spaghetti</option>
        </select>

json响应的值类似于{“toName”:“CustomerX”} 我的实际代码:

        <div class='label'><label for='toName'>To Name</label></div>
            <div class='input' style='width:15%'><select id='toName'>
                                    <option value=''></option>
 <?php
    foreach ($customers as $k => $v)
    {
            if(strlen($v) > 0)
            {
                    echo "<option value='" . $k . ":" . $v . "'>" . $v . "</option>";
            }
    }
 ?>
    </select></div>

4 个答案:

答案 0 :(得分:2)

您需要在下拉列表中设置id =,而不仅仅是名称。 jQuery在您设置的循环中无法通过名称找到它。如果您需要&#39;名称&#39;出于某种其他目的,您可以设置相同的。

<select id='favoriteFood' name='favoriteFood'>

答案 1 :(得分:1)

jsfiddle =&gt; http://jsfiddle.net/apf9ds5m/2/

你想要所选的文字吗?然后就可以了:

$('#sub').click(function(){
    var returnValues = {'name':'Bob','age':'21','favoriteFood':'Spaghetti'};
    $.each(returnValues, function(e,i){
        //alert(e+i);
        if ('favoriteFood' === e) {
            $('select#'+e).val(i).attr("selected", "selected");
        } else {
            $('#'+e).val(i);
        }
    });
});

请在选择中添加ID:

<select id='favoriteFood' name='favoriteFood'>

答案 2 :(得分:0)

解决方案是添加:

 if (e == "toName"){
 $('#toName option:contains('+i+')').prop('selected', true);
 }

我必须对表单中的所有选择字段执行此操作。

答案 3 :(得分:0)

有点像你看的那样吗?

$('#sub').click(function() {
    var returnValues = {'name':'Bob','age':'21','favoriteFood':'Spaghetti'};
    $.each(returnValues, function(e,i){
        alert(e+i);
        $('#'+e).val(i);
        if (e == 'favoriteFood') {
            $('select option[value="'+i+'"]').attr('selected', true);
        }
    });
});