在php中使用jquery在选择框上显示复选框

在php中使用jquery在选择框上显示复选框,php,jquery,Php,Jquery,我在数据库中有两个表:城市和本地区 我有一个选择框,允许我选择要显示的城市。当我选择一个城市时,它应该显示一个新的HTML元素,显示给定城市的所有本地区域 我必须使用jQuery来完成这项工作,在选择之后,我想将我的记录存储在数据库表中。您需要使用向服务器询问与城市对应的区域列表。或者,可能是这样,最好用页面加载所有区域的完整列表。例如: <script language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jqu

我在数据库中有两个表:城市和本地区

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

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

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

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

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

你能更努力地解释一下你得到的是什么吗,你的格式到处都是,读了之后我一点也不知道你的问题。你尝试过什么吗?我想要onchnage函数将值传递到php文件并在复选框中显示结果。你已经有一些代码了吗?您可以使用AJAX调用php脚本onchange生成复选框,并在预定义的代码中显示发送的代码。我在本地主机上运行它。它不工作。代码中缺少什么?键入而不是。固定的还有,别忘了jQuery。现在可以做得更好了。在这里进行更多编辑,本地区域应该显示在复选框中。我无法为您完成所有工作。您必须修改脚本以满足您的需要。如果需要复选框,则替换为和。。。是的,我正在尝试,但它没有运行。如果您上次为我做了,我将不胜感激:在您发送的代码senerio中,如果我选择lahore,我希望比在结果中我希望检索lhry的localareas您必须在服务器端筛选localareas。我通过cityId参数将所选城市发送到服务器。您应该获取此参数并过滤区域,然后在数组中返回它们
<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>
<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>