Question

这里的代码在点击第一个选择时，它会将请求发送到route.php并获得结果，它将显示输出int <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>

Answer 2

在AJAX调用之外构造select。这样您的选择将始终可见。

<select id="sel"></select>

然后在AJAX返回函数中添加选项值。

function(data,status){
  $("#sel").append( '<option value="volvo" selected>' + data + '</option>' ); 
  $("#sel").append( '<option value="audi" >b</option>' );
  ...
}

基于更新的问题

您希望每当您更改select中DIV的值时，都应该引入新的SELECT，这应该会在n次内继续发生。我在下面尝试了相同但无法立即测试它。我们的想法是，您使用on事件委派来跟踪Select中的任何更改，如果检测到，则调用Ajax并附加结果。

HTML

<div id="result">
<select><option>Please select</option></select>
</div>

JQUERY

<script>
  $("#result select").on ('change', function(){
    var name=$("#name").val();
    $.post("route.php",
    {
      name:name
    },
    function(data,status){
       $( "#result" ).append ( data );
    });
  });
</script>

Answer 3

做这样的事情：

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

另一个文件可以保持不变：

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

使用append或replace来获取正确的代码。您可以选择仅返回options或完整的selection部分

根据JQuery中的输入构造选择框

更新：

3 个答案: