2017-08-17 82 views
0

如何根据第一个select的值添加另一个select如何在php中进行链操作

当第一select箱变,我想打一个AJAX请求到另一个select,基于第一select的值取值,并把它们插入作为DOM在新select选项。

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<title>Populate City Dropdown Using jQuery Ajax</title> 
 
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
<script type="text/javascript"> 
 
$(document).ready(function(){ 
 
    $("select.country").change(function(){ 
 
     var selectedCountry = $(".country option:selected").val(); 
 
     $.ajax({ 
 
      type: "POST", 
 
      url: "process-request.php", 
 
      data: { country : selectedCountry } 
 
     }).done(function(data){ 
 
      $("#response").html(data); 
 
     }); 
 
    }); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 
<form> 
 
    <table> 
 
     <tr> 
 
      <td> 
 
       <label>Country:</label> 
 
       <select class="country"> 
 
        <option>Select</option> 
 
        <option value="usa">United States</option> 
 
        <option value="india">India</option> 
 
        <option value="uk">United Kingdom</option> 
 
       </select> 
 
      </td> 
 
      <td id="response"> 
 
      </td> 
 
     </tr> 
 
    </table> 
 
</form> 
 
</body> 
 
</html>

+0

我只能看到1选择在你的HTML,但使用jQuery,你可以简单地使用'$( “#选择2”)。VAL($( “#选择1”)。VAL( ));'如果你想将第二个select设置为第一个的值。 – xander

+1

'process-request.php'返回什么? 如果你运行这段代码,选择一个国家后''td id =“response”>'是什么内容? –

回答

-1

我想你应该尝试AJAX的这种语法。

$("select.country").change(function(){ 
var selectedCountry = $(".country option:selected").val(); 
$.ajax({ 
    type: "POST", 
    url: "process-request.php", 
    data: { country : selectedCountry } 
    success: function(data){$("#response").html(data);}, 
    error: function(err){} 
}) 

});

+0

为什么?你提出的是旧式的jQuery,问题中的代码实际上更好! – xander

0

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
<script type="text/javascript"> 
 
$(document).ready(function(){ 
 
    $("select.country").change(function(){ 
 
     var selectedCountry = $(".country option:selected").val(); 
 
     
 
//sample data - code starts here 
 
     var data = '[{"id":1,"name":"Karnataka"},{"id":2,"name":"Karnataka2"}, {"id":3,"name":"Karnataka3"}]'; 
 
     data = jQuery.parseJSON(data); 
 
//sample data ends here 
 

 
     $('#response').append(' <label>State:</label><select class="state" id="state"> </select> '); 
 

 
     $('#response select').append($("<option />").val('').text('Select')); 
 

 
     $.each(data,function(index, value){ 
 

 
      $('#response select').append($("<option />").val(value.id).text(value.name)); 
 
     }); 
 
//add above code to your ajax success - code ends here.. 
 

 
     $.ajax({ 
 
      type: "GET", 
 
      url: "process-request.php", 
 
      data: { country : selectedCountry } 
 
     }).done(function(data) { 
 
      
 
                
 

 
     }); 
 
    }); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 
<form> 
 
    <table> 
 
     <tr> 
 
      <td> 
 
       <label>Country:</label> 
 
       <select class="country"> 
 
        <option>Select</option> 
 
        <option value="usa">United States</option> 
 
        <option value="india">India</option> 
 
        <option value="uk">United Kingdom</option> 
 
       </select> 
 
      </td> 
 
      <td id="response"> 
 
      </td> 
 
     </tr> 
 
    </table> 
 
</form> 
 
</body> 
 
</html>