使用jquery ajax动态更改选择下拉列表值

时间:2016-11-18 06:26:42

标签: php jquery ajax

我在表单中使用两个下拉列表进行搜索。第二个下拉值将根据第一个下拉值的选择而改变。 ajax请求但不知何故从php脚本返回任何值。有关代码更改的任何建议吗?

的search.php

<select name="shop_name" id="shop_name">
                  <option value="blank">Select one</option>
                  <?php
                  $searchItem = new dbhandler();
                  $shopData = $searchItem->all_data('food_shops');
                  $i = 0;
                  foreach($shopData as $sd) {
                    ?>
                    <option value="<?php echo $shopData[$i]->r_id; ?>"><?php echo $shopData[$i]->name; ?></option>
                    <?php $i++; } ?>
 </select>

的script.js

<script type="text/javascript">
$(document).ready(function()
{
  $("#shop_name").change(function()
{
  var id=$(this).val();
  var dataString = 'id=' + id;
$.ajax
({
  type: "GET",
  url: "dynamic_select.php",
  data: dataString,
  success: function(data)
  {
    $("#location").html(data);
  }
  });

  });

  });

dynamic_select.php

<?php

if($_GET['id']) {

  $crs = $_GET['id'];
?>

  <select name="location" id="location">
<?php
  $searchItem = new dbhandler();
  $searchItem->find('food_shops' , 'r_id', $crs);
  $data = $searchItem->data();
  $j = 0;
  foreach($data as $d) {
    ?>
    <option value="<?php echo $data[$j]->address; ?>"><?php echo $data[$j]->address; ?></option>
  </select>
<?php $j++; } } ?>

all_data()查询SELECT * FROM table_name 和find()查询SELECT * FROM table_name WHERE r_id = $crs

2 个答案:

答案 0 :(得分:1)

您可以通过检查员查看您的回复,如下所示。在您的页面中,您只需检查您在回复中获得的内容。您只需打开检查员网络&gt; xhr,然后从第一个下拉列表中选择值。在选择下拉列表时,它将调用dynamic_select.php并显示给检查员,只需选择响应,您就可以在那里看到响应。

enter image description here

答案 1 :(得分:0)

<script type="text/javascript">
    $(document).ready(function()
    {
      $("#shop_name").change(function()
    {
      var id=$(this).val();
      var dataString = 'id='+ id;

    $.ajax
    ({
      type: "GET",
      data: dataString,
      cache: false,
      url : "dynamic_select.php",
      success: function(data)
      {
        $("#location").html(data);
      }
      });

      });

      });
  </script>

在ajax脚本中添加带id的url,如果需要,请更改dynamic_select.php路径。