javascript - JQuery根据输入构造选择框

Question

在代码中单击第一个选择时，它会将请求发送到 route.php 并获取结果，并将显示输出 int he <div id="result">

但我需要的是两个选择框都应该在第一页本身并且在选择它时应该将结果发送到 route.php 并且值应该填充在第二个选择框中(直到选择第一个选择框第二个选择应该说请选择上面)

这是我的 Jquery 发布和请求代码

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select  id="name">
  <option value="volvo">Volvo</option>
  <option value="audi" selected>Audi</option>
</select>
<div id='result' name="result">
</div>
<script>
$(document).ready(function(){
  $("#name").change(function(){
    var name=$("#name").val();
    $.post("route.php",
    {
      name:name
    },
    function(data,status){
       $( "#result" ).html( data );
    });
  });
});
</script>

而 route.php 是

<?php
$a = $_REQUEST['name'];
?>
<select  id="name">
  <option value="volvo" selected><?php echo $a;?></option>
  <option value="audi" >b</option>
  <option value="audi" >v</option>
</select>

我该怎么做？

更新:

假设我遵循以下代码并且我想执行 n 次。这可能吗？

HTML :

<div id='result' name="result">
<select  id="result-name">
  <option value="" disabled>Please select above</option>
</select>
</div>
<script>
$(document).ready(function(){
  $("#name").change(function(){
    var name=$("#name").val();
    $.post("route.php",
    {
      name:name
    },
    function(data,status){
       $( "#result" ).html( data );
    });
  });
});
</script>

route.php

<?php
$a = $_REQUEST['name'];
?>
<select  id="result-name">
  <option value="volvo" selected><?php echo $a;?></option>
  <option value="audi" >b</option>
  <option value="audi" >v</option>
</select>

Answer 1

您可以尝试简单地使用 select 元素本身，

<select id='result' name="result">
     <option>---Please select above value first---</option>
</select>

和route.php

<?php
$a = $_REQUEST['name'];
?>
  <option value="volvo" selected><?php echo $a;?></option>
  <option value="audi" >b</option>
  <option value="audi" >v</option>