在php中使用jquery在选择框上显示复选框 - Show Checkboxes on select box using jquery in php

Show Checkboxes on select box using jquery in php

本文关键字：显示复选框选择 jquery php | 更新日期: 2023-09-27

我在数据库中有两个表：city和local_area

city :
id     name  
1      FSD  
2      LHr  
Local_area :
id     city_id     name  
1      1           Kohnoor  
2      1           samnabad  
3      2           joharabad  
4      2           amanabad  
<select>
  <option value="1">Fsd</option>
  <option value="2">LHR</option>
</select>

我有一个选择框，允许我选择要显示的城市。当我选择一个城市时，它应该显示一个新的HTML元素，显示给定城市的所有local_area。

我必须使用jQuery来完成这项工作，在选择之后，我想将我的记录存储在数据库表中。

<select id="ddCity">
 <option value="-1"></option>
 <option value="1">FSD</option>
 <option value="2">LHr</option>
</select>
<div id="local_area_Grid"></div>
<script>
     $(function(){
        $("#ddCity").change(function(){
           if($(this).val() != -1){
           $.ajax({
                url: "Server_address",
                data:{cityId = $(this).val()},
                success: function(data){
                      var _table = $("<table></table>");
                      for(var i = 0; i< data.length; i++){
                          $("<tr></tr>").append($("<td></td>").html("<label><input type='checkbox' value='data[i]' name='local_area'/>" + data[i] + "</label>")).appendTo(_table);
                      }
                      $("#local_area_Grid").html("").append(_table);
                }
           });
           }
        });
     })
</script>

您应该从服务返回一个数组

您需要使用jQuery AJAX向服务器"询问"与城市对应的区域列表。或者，可能是，最好是用页面加载所有区域的完整列表。例如：

<script language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<select id="city" name="city">
  <option value="0">- Select -</option>
  <option value="1">Fsd</option>
  <option value="2">LHR</option>
</select>
<div id="area" style="display:none">
</div>
<script language="JavaScript">
var areas = {
 '1' : { '1' : 'Kohnoor' },
 '2' : { '1' : 'amanabad' }
}
$(function (){
    var areaSelect = $('#area');
    var citySelect = $('#city').change(function (){
        var value = $(this).val();
        if( value && typeof areas[value] != 'undefined' ){
            areaSelect.empty().show();
            for( var i in areas[value] ){
                areaSelect.append('<input type="checkbox" name="area[]" value="'+i+'" />'+areas[value][i]+'<br />');
            }
        }else{
            areaSelect.empty().hide();
        }
    });
});
</script>