Question

我知道有很多像我这样的类似问题，但我似乎无法让它与建议的回答一起使用。请耐心等待。它可能是非常明显的，我看不到它。

无论如何，我的表格看起来像这样：

                    <form  action="order-process.php" method="POST">
                <input  type="hidden" id="showForm" name="f_order[show_form]" value="0"/>
                <div class="row">

                    <div class="input-field col s6">

                    <input id="customer-autocomplete" type="text" class="validate" required />
                    <input type="hidden" id="customer_id" name="f_order[customer_id]" />
                    <label for="phone">Select Existing Customer</label>
                    </div>


                    <div class="input-field col s6">
                    <input type="checkbox" name="f_order[new_customer]" value="1" />
                        <label>Or Create New Customer</label>
                    </div>
                </div>



                <div class="row" id="existing-address" style="display: none;">

                    <div class="input-field col s6">
                        <select id="customer-address-select" name="f_order[delivery_id]">
                        <option value="">Select Delivery Address</option>
                        </select>
                        <label for="customer-address-select"></label>
                    </div>


                    <div class="input-field col s6">
                    <input type="checkbox" name="f_order[new_customer]" value="1" />
                        <label>Or Create New Address</label>
                    </div>
                </div>

和jquery：

$( "#customer-autocomplete" ).autocomplete({
minLength: 3,
source: function( request, response ) {
  // Fetch data
  $.ajax({
  url: "customer-list-select.php",
  type: 'post',
  dataType: "json",
 data: {
   search: request.term,
 },
 success: function( data ) {
 response( data );
 }
});
},
 select: function (event, ui) {
  // Set selection
 $('#customer-autocomplete').val(ui.item.label); // display the selected text
 $('#autocomplete_customer_id').val(ui.item.value); // save selected id to input

 $.ajax({
    url: "customer-list-addresses.php",
    type: "post",
    dataType: "json",
    data: { cid : ui.item.value },

    success: function(data){
        // Parse the returned json data
        var opts = data;
        // Use jQuery's each to iterate over the opts value
        $.each(opts, function(k, v){
            $('#customer-address-select').append('<option value=' + v.value + '>' + v.label + '</option>');
        });
    }


  }),
  $('#existing-address').toggle();
  return false;
  }
});

所以，我正在做的是在客户名称字段上进行自动完成工作正常。选择客户后，我将获取ID以获取所选客户的可用送货地址列表。那部分工作正常。唯一不起作用的部分是select＃customer-address-select没有填充选项。因此，这部分代码无法正常工作：

$('#customer-address-select').append('<option value=' + v.value + '>' + v.label + '</option>');

有什么建议吗？

感谢您的关注。

PS。 json的反应很好，看起来像这样：

[{"label":"First Street, Weekmoor","value":"1"},{"label":"Second Corner, Weekmoor","value":"2"}]

从JSON填充选择框

0 个答案: