如何用PHP实现select二级联动,根据第一个下拉框选择的内容来选择第二个下拉框的内容

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何用PHP实现select二级联动,根据第一个下拉框选择的内容来选择第二个下拉框的内容相关的知识,希望对你有一定的参考价值。

为什么提交之后的值不是下拉框里面的值?提交之后添加的只是ID编号
<script>var fieldname=new Array();<?php$field = "select * from pur_quanx_fieldname";$resfie = mysql_query($field); while ($arrfie = mysql_fetch_array($resfie)) ?>fieldname.push(new Array("<?php echo $arrfie['field_id'] ;?>","<?php echo $arrfie['field_name'] ;?>","<?php echo $arrfie['quanx_id'] ;?>"));<?php?>//当选择权限时改变字段名的下拉菜单function quanxian (quanx_id)var tobj=document.getElementById('fieldname');removeAllOptions(tobj);var option = document.createElement("option");option.text = "请选择";option.value = "";tobj.add(option);for(m=0;m<fieldname.length;m++)if(fieldname[m][2]==quanx_id)var option = document.createElement("option");option.text = fieldname[m][1];option.value = fieldname[m][0];tobj.add(option);; function removeAllOptions(selectbox)var i;for(i=selectbox.options.length-1;i>=0;i--)selectbox.remove(i); </script>

给第一个select加js事件,点击它的时候动态加载第二个select的内容,比如写个ajax获取第一个select的value(这个value是哪个quanx_id),然后去后台请求,后无论是用缓存还是说直接从数据库中查,得到这个value对应的field,再返回数据到前台进行处理。也可以在页面加载的时候就直接吧每个quanx_id的对应关系全部查找并在模板中的js用相应变量存储后,再采用上面的思路去动态加载就是了。反正最终都是当select1的value发生变化,动态加载select2的value. 参考技术A 因为提交的时候只是提交value的值,下拉框现显示的只是给用户看的,并不会随表单被提交

PHP+ajax实现二级联动菜单功能


文章来自于:博客

链接:

PHP+ajax实现二级联动菜单功能









以下是正文内容

PHP+ajax实现二级联动菜单功能

如何实现二级联动

工作原理

二级联动在开发中是比较常见的一个技术点,它主要运用了JS的局部刷新技术ajax,不同于一般页面全局刷新,它只会刷新我们需要改变值的地方,我们首先看下它的工作流程。

  • 第一步:我们会向后台发送一个请求

  • 第二步:后台接受请求后,会返回给我们一个值

  • 第三步:将值用JS呈现在页面中


HTML代码

<html>
<head>
<title>二级联动</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf8">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<style>
#area-box{width:500px;height:400px;margin:0 auto;border:0px solid #dddddd;text-align:center;}
.area-select{width:200px;height:30px;margin-top:30px;margin-left:30px;}
</style>

<head>
<body>
  <div id="area-box">
    <select class="area-select" id='address'>
      <option value="0">请选择省份</option>
      <option value="1">四川</option>
      <option value="2">河北</option>
      <option value="3">湖南</option>
    </select>
    <select class="area-select" id="city">
      <option>请选择城市</option>
    </select>
  </div>
  <script>
  $(function(){
    //初始化数据
    var url = 'address.php'//后台地址
    $("#address").change(function()//监听下拉列表的change事件
      var address = $(this).val(); //获取下拉列表选中的值
      //发送一个post请求
      $.ajax({
        type:'post',
        url:url,
        data:{key:address},
        dataType:'json',
        success:function(data)//请求成功回调函数
          var status = data.status; //获取返回值
          var address = data.data;
          if(status == 200){ //判断状态码,200为成功
            var option = '';
            for(var i=0;i<address.length;i++){ //循环获取返回值,并组装成html代码
              option +='<option>'+address[i]+'</option>';
            }
          }else{
            var option = '<option>请选择城市</option>'//默认值
          }
          $("#city").html(option); //js刷新第二个下拉框的值
        },
      });
    });
  });
  </script>

</body>

PHP代码

<?php
  $key = $_POST['key']; //获取值
  $address[1] = array('成都','绵阳','德阳');
  $address[2] = array('石家庄','唐山','秦皇岛');
  $address[3] = array('长沙','株洲','湘潭');
  if(!empty($address[$key])){ //有值,组装数据
    $result['status'] = 200;
    $result['data'] = $address[$key];
  }else//无值,返回状态码220
    $result['status'] = 220;
  }
  echo json_encode($result); //返回JSON数据
?>


运行效果:

PHP+ajax实现二级联动菜单功能


其实三级联动和二级联动的原理都是一样的,只是在其基础上在重复一次而已,大家有空的话可以试着实现实现!



你花了   ·  来阅读,阅读增长见识,

希望对你有帮助,点个  再走吧~

以上是文章全部内容,有学习与经验交流的可以加以下二维码为好友,记得备注“码农”。


以上是关于如何用PHP实现select二级联动,根据第一个下拉框选择的内容来选择第二个下拉框的内容的主要内容,如果未能解决你的问题,请参考以下文章

(实用篇)jQuery+PHP+MySQL实现二级联动下拉菜单

jQuery+php实现二级联动

jsp做select下拉列表二级联动的,第一个select显示数据库里的字段名称,第二个显示对应字段的数据

如何用jquery+ajax写省市区的三级联动?(封装和不封装两种方式)-----2017-05-14

PHP+ajax实现二级联动菜单功能

php简单实现二级联动