Javascript 如何将json_编码数据附加到下拉列表中

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

我收到了警报中的数据。但是如何在第二个下拉选择标记中显示数据

<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>

$（文档）.ready（函数（）{
$（“#第一个下拉菜单”）。关闭（“更改”）。打开（“更改”，函数（）{
$.ajax({
“url”：“getUrl.php”，
'data'：{id:$（“#第一个下拉列表”）.val（），
'method'：'GET'，
“成功”：函数（数据）{
警报（数据）；
}
})
})
});
选择产品线
活着的
厨房
沐浴与实用
家具

我的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); 

?>

---

我想在第二个下拉列表中显示数据。任何一个给我解决方案的人，我六个小时后就开始尝试了。

在success函数中添加此代码，以解析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>");
}

var options=JSON.parse（数据）；
对于（选项中的var i）{
$（“#第二个下拉列表”）.append（“+options[i].产品类别+”）；
}

parse将JSON字符串转换为可以使用JavaScript操作的数组。

---

用于创建select的html选项的循环，然后将这些元素附加到select。

这用于解析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 
    }));
});

$（“#第二个下拉菜单”）.html（“”）；
//var new_data=$.parseJSON（数据）；
$。每个（新数据、功能（i、项）{
$（'#第二个下拉列表'）。追加（$（''，{
价值：项目。产品类别，
文本：item.product\u类别
}));
});

$（文档）.ready（函数（）{
$（“#第一个下拉菜单”）。关闭（“更改”）。打开（“更改”，函数（）{
$.ajax({
“url”：“getUrl.php”，
“数据类型”：“json”，
'data'：{id:$（“#第一个下拉列表”）.val（），
'method'：'GET'，
“成功”：函数（数据）{
警报（数据）；
var results=data.d.results；//这里仅假设这是一个具有所需选项值的元素数组。如果不是，我们需要打印响应数据并检查选项的所有值存储在哪里。
var期权=“”；
$（“#第二个下拉列表”）.html（“”）；
对于（var i=0；i，这里还有一种方法可以做到这一点（没有json）：

在success函数中，您希望循环遍历数据对象，并在下拉列表中添加选项。这可以帮助您：您还可以放置json字符串数据吗？请提供您的响应数据，以便我可以为您推荐一个代码。这非常简单。。改为了解，然后使用or-将帮助您确定哪个选项。如果您选择PDO，。您应该请在继续之前阅读。感谢您提供的这段代码片段，它可能会提供一些有限的、即时的帮助。A将通过说明为什么这是一个很好的问题解决方案来极大地提高其长期价值，并使它对未来有其他类似问题的读者更有用。请您的答案添加一些解释，包括g您所做的假设。感谢您提供的这段代码片段，它可能会提供一些有限的、即时的帮助。A将通过说明为什么这是一个很好的问题解决方案来极大地提高其长期价值，并使其对未来有其他类似问题的读者更有用。请您的答案添加一些解释，包括t你所做的假设。这是可行的，但问题是，当我将#第一个下拉列表的值让假设值“A”更改为值“B”时，它会在#第二个下拉列表中添加带有“A”的选项“B”，但我希望它只显示“B”的值。虽然这个代码片段可能是解决方案，但确实有助于提高你的帖子质量。记住您正在为将来的读者回答这个问题，这些人可能不知道您的代码建议的原因。@HarrisKhan您的选项列表已经用所选id在PHP中进行了筛选。不是吗？那么您应该只有所需的选项。
    $(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);
                }
           })
      })

  });

<?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>