使用 Ajax POST 调用的响应填充下拉列表

Question

我一直在尝试制作两个相关的下拉菜单。我使用 PHP 命令从 API 获取所有数据值。现在我已经能够填充第一个下拉列表，但对于第二个下拉列表，我正在进行 Ajax POST 调用，因为我需要使用 PHP 函数这是代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
  $(document).ready(function(){
      $('select#district_area').change(function(){
          var district_val = $(this).val();
          console.log(district_val);
          $.ajax({
              url:"c.php",
              method: "POST",
              data: {'district_val':district_val},
              success:function(data){
                console.log(data);
               $('select#district_area').html(data);
            }
          });
          
      });
  });
</script>
<body>
<div>
<select name="district_area" id="district_area">
<option> Select District </option>
<?php foreach($districts as $first){ ?>
         <option><?php print($first['district_name']); ?></option>
         <?php } ?>
</select>
<p></p>
<select name="delivery_area" id="delivery_area">
<option>Select Delivery Area</option>
</select>
</div>
</body>

这里 $districts 是值数组。

c.php

：

$district_value = $_POST['district_val'];
$del_val = search_recursive_key_value($decoded, 'name', $district_value);   
?>
<select name="delivery_area" id="delivery_area">
<option><?php echo $del_val; ?></option>
</select>

Ajax POST 调用有效。我得到的响应不是 JSON 格式。我一直在尝试使用

dataType:"JSON"

以 JSON 格式获取它，但它仍然没有以 JSON 格式返回它，所以我无法创建第二个依赖下拉列表。

我已经控制台记录了它

回应：

如何使用这些值填充下拉列表？

Answer 1

您需要有用于生成选项的 HTML 标签并将它们附加到选择下拉列表中。

在 AjaxCall 的成功函数中尝试类似的操作：

$("select#delivery_area").append('<option value=' + "data.district_val" + '>' + data.district_val + '</option>');

如果您的数据长度超过 1，那么您需要一个 for 循环来生成每个选项并将每个选项附加到选择下拉列表中。

Answer 2

不太确定你想做什么..也许这会有所帮助：

$('select#district_area').html(data);

应该是

$('select#delivery_area').html(data);

Answer 3

有效的解决方案：

$(document).ready(function(){
        $('select#district_area').change(function(){
          var district_val = $(this).val();
          console.log('District selected:',district_val);
          $("select#delivery_area").empty();
          $.ajax({
              url:"c.php",
              method: "POST",
              data: {'district_val' : district_val},
              success:function(data){
                console.log(data);
                splitData = data.split(",");
                console.log(splitData);
                for(var i=0; i<splitData.length-1; i++){
                  $("select#delivery_area").append('<option value="">' + splitData[i] + '</option>')
                }
              }
          });
      });
    });

使用 Ajax POST 调用的响应填充下拉列表

问题描述投票：0回答：3

3个回答

最新问题

使用 Ajax POST 调用的响应填充下拉列表

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3