Question

我有这个jquery.ajax表单，它填充数据库中的数据，并在点击按钮时自动填写表单字段。当表单字段是文本类型时，它很有用但是当表单字段是选择框时，它不会自动填充。这是我目前的代码..

<script type="text/javascript">
    $(document).ready(function() {
        function myrequest(e) {
            var lead_id = $('#lead_id').val();
            $.ajax({
                 method: "GET",
                url: "/pdp/fetch-client-data/",
                dataType: 'json',
                cache: false,
                data: {
                    lead_id: lead_id
                },
                success: function( responseObject ) {
                    alert('success');
                    $('#client_name').val( responseObject.client_name );
                    $('#state').val(responseObject.state);

                },
                failure: function() 
                {
                    alert('fail');
                }
            });
        }

        $('#fetchFields').click(function(e) {
            e.preventDefault();
            myrequest();
        });
        $("#lead_id").bind("change", function(e)
        {
          myrequest(); 
        });
    });

    </script>

    <table width="600" align ='center'>
    <form action ='<?php echo $SERVER['PHP_SELF']; ?>' method='post'>

        <tr>
            <td>        
                <label for="lead_id">Lead id: </label>

                <input type="text" name="lead_id" id="lead_id">

                <button id="fetchFields">Fetch</button>
            </td>
        </tr>
        <tr>
            <td>
                Agent: <select name="agent">
                    <option value="">[Select]</option>
                    <?php foreach($this->agent_query as $agent){ ?>
                    <option value="<?php echo $agent['id']; ?>"><?php echo $agent['name'];?></option>
                    <?php } ?>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <label for="client_name">Client Name:  </label>
                <input type="text" name="client_name" id="client_name">
            </td>
        </tr>
        <tr>    
            <td>
                <label for="state">State: </label>
                <select name="state" id='state'>
                <option id='state' value='1'></option>
                </select>
            </td>
        </tr>
            <tr>
            <td>
                # of Policies: 
                <select name="policies">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select>
            </td>
            </tr>       
        <tr>
            <td>
                <input type="submit" value="NEXT" name="submit">
            </td>
        </tr>

    </form>
    </table>

Answer 1

当你说

时

但是当表单字段是选择框
时，它不会自动填充

您的意思是在<select>填写服务器端的数据列表，还是选择<option>上已有的<select>？

如果您希望填充<select>，那么您必须创建代表每个<option>的每个节点，这些节点填充了您从服务器端带来的相应数组项。实施例

$('#state>option').remove();
$.ajax(
  ...
  success: function(data){
    for(var i=0; i<data.array.length; i++){
      $('#state').append($('<option>')
        .attr('value', data.array[i].value)
        .html(data.array[i].name));
    }
  }
);

如果你想要的是选择<option>上已有的<select>，那么你需要迭代当前的选项并将其应用于'selected'属性或设置{{1}将selectedIndex作为要选择的选项的索引。例如：

<select>

选择框的自动填充表单字段

1 个答案: