Question

我有两个输入字段。我想得到第一个输入字段的值，并通过php查询将其发送到数据库以获取第二个输入字段的值。现在我正在提醒数据，但我不知道如何将值放在第二次下拉。

我正在提醒数据。但我如何在＃second-dropdown select tag中显示数据。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $("#first-dropdown").off("change").on("change", function(){
        $.ajax({
             'url':"getUrl.php",
            'data':{id:$("#first-dropdown").val()},
            'method':'GET',
            'success':function(data){
                 alert(data);


            }


            })
        })

    });
</script>

<select id="first-dropdown">
 <option value="0">Select Product Line</option>
  <option value="1">Living</option>
  <option value="2">Kitchen</option>
  <option value="3s">Bathe & Utility</option>
  <option value="4">Furniture</option>
</select>
<select id="second-dropdown">

</select>

我的getUrl文件是：

<?php
 $id = $_GET['id'];
     $query = mysql_query("select category_name from product_categories where Line_Code='$id'");
         while($data = mysql_fetch_assoc($query)){
             $values[] = array(
        'product_categories'=>$data['category_name'],

    );

         }
echo json_encode($values); 

?>

我想在＃second-dropdown中显示数据。任何一个给我解决方案我正在尝试这个六个小时。

Answer 1

这是用于在json中解析数据

var new_data = $.parseJSON(data);

或添加/编辑您的ajax属性

datatype:"json"

在您的成功功能中尝试此操作。

$("#second-dropdown").html('');
//var new_data = $.parseJSON(data);
$.each(new_data, function (i, item) {
    $('#second-dropdown').append($('<option>', { 
        value: item.product_categories,
        text : item.product_categories 
    }));
});

Answer 2

这是另一种方法（没有json）：

<?php
 $id = $_GET['id'];
 $query = mysql_query("select category_name from product_categories where Line_Code='$id'");
 $retval="";
 while($data = mysql_fetch_assoc($query)){
    $retval=$retval."<option value='".$data['category_name']."'>".$data['category_name']."</option>";
 }
echo $retval; 
?>

并在您的脚本中：

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $("#first-dropdown").off("change").on("change", function(){
        $.ajax({
             'url':"getUrl.php",
            'data':{id:$("#first-dropdown").val()},
            'method':'GET',
            'success':function(data){
                 $("#second-dropdown").html(data);
            }
            })
        })

    });
</script>

Answer 3

在您的成功函数中添加此代码以解析您的JSON并创建您要在select元素中添加的选项。

var options = JSON.parse(data);
for(var i in options){
  $("#second-dropdown").append("<option value='"+ options[i].product_categories +"'>"+ options[i].product_categories +"</option>");
}

JSON.parse将您的JSON字符串转换为可以使用JavaScript操作的数组。为select创建html选项的循环然后将这些元素附加到select。

Answer 4

    $(document).ready(function(){
             $("#first-dropdown").off("change").on("change", function(){
               $.ajax({
                 'url':"getUrl.php",
                 'dataType':"json",
                 'data':{id:$("#first-dropdown").val()},
                 'method':'GET',
                 'success':function(data){
                   alert(data);
                   var results=data.d.results; //only assumption here this is a array of element with required option value. if it is not we need to print response data and check where all the value of options are stored.
                  var option='';
                  $("#second-dropdown").html('');
                  for(var i=0;i<results.length;i++)
                   {
                     option+='<option value="'+results[i]+'">'+results[i]+'</option>';
                   }
                    $("#second-dropdown").append(option);
                }
           })
      })

  });

如何将json_encode数据附加到下拉列表中

4 个答案: