精华内容
下载资源
问答
  • 下拉选框二级三级联动

    下拉选框的二级三级联动

    所谓二级联动,就是要通过一个下拉列表的选择从而在另一个select下拉列表中显示出对应的数据。例如:两个下拉列表,第一列表是选择省份,第二个列表则显示该省份的城市。
    如下图:在这里插入图片描述
    我选择湖北省则出现湖北省个各个市级地区名:
    在这里插入图片描述

    具体代码如下:

    <body>
    	<!-- 创建三个下拉选框 -->
        <select name="" id="slt1"></select>
        <select name="" id="slt2"></select>
        <select name="" id="slt3"></select>
        <!-- 引入外部js文件(各个地区名文件) -->
        <script src="./area-json.js"></script>
        <script>
        // 获取三个下拉框
        var province = document.getElementById('slt1'); 
        var city = document.getElementById('slt2');
        var district = document.getElementById('slt3');
        // 将各地区添加到 下拉框option标签中 
        data.forEach(function (item) {
             var opt = document.createElement('option');
                 province.appendChild(opt);
                 opt.innerText = item.name;
            });
            // 创建一个变量接收省的全部名称
            var sheng;
            
            // 二级联动
            
            // 给第一个框添加onchange事件
        province.onchange = function () {
        		// 遍历外部js文件 里面的data对象
                for (var get in data) {
                	// 判断框里面的值是否等于data里面的省份名
                    if (province.value == data[get].name) {
                    	// 将data[get]付给sheng
                        sheng = data[get];
                        // 将第二个框的内容清空
                        city.innerHTML = "";
                        data[get].children.forEach(function (item) {
                        var opt = document.createElement('option');
                            city.appendChild(opt);
                            opt.innerText = item.name;
                        }) 
                    }
                }
            }
    
    		 // 三级联动
    		 
            city.onchange = function () {
                            for (var get in sheng.children ) {
                                console.log(data[get].children);
                                if(city.value == sheng.children[get].name){
                                    console.log(123);
                                   district.innerHTML = ""; 
                                    sheng.children[get].children.forEach(function (item) {
                                    var opt = document.createElement('option');
                                        district.appendChild(opt);
                                        opt.innerText = item.name;
                                    })
                                }
                            }
                        }
        
        
        </script>
    </body>
    
    展开全文
  • 二级联动下拉选择

    2020-11-19 16:17:35
    <view class="cu-form-group"> <view class="title">选择地区</view> <picker mode="multiSelector" :value="areaIndex" :range="area" range-key="name" @change="change" @columnchange=...

    html部分

    <view class="cu-form-group">
        <view class="title">选择地区</view>
        <picker mode="multiSelector" :value="areaIndex" :range="area" range-key="name" @change="change" @columnchange="columnChange">
            <view class="picker">
                {{area[0][areaIndex[0]].name}},{{area[1][areaIndex[1]].name}}
            </view>
        </picker>
    </view>
    

    js部分

    import api from '@/common/api'
    export default {
      data() {
        return {
          loading: true,
          area: [
            {
              id: 8,
              parent_id: "",
              code: "",
              name: "浙江",
              child: [
                {
                  id: 9,
                  parent_id: "8",
                  code: "",
                  name: "温州",
                },
                {
                  id: 11,
                  parent_id: "8",
                  code: "",
                  name: "杭州",
                },
                {
                  id: 12,
                  parent_id: "8",
                  code: "",
                  name: "宁波",
                },
                {
                  id: 13,
                  parent_id: "8",
                  code: "",
                  name: "舟山",
                }
              ]
            },
            {
              id: 18,
              parent_id: "",
              code: "",
              name: "广东",
              child: [
                {
                  id: 19,
                  parent_id: "18",
                  code: "",
                  name: "广州",
                },
                {
                  id: 20,
                  parent_id: "18",
                  code: "",
                  name: "深圳",
                },
                {
                  id: 21,
                  parent_id: "18",
                  code: "",
                  name: "佛山",
                }
              ],
            }
          ],
          areaIndex: [0, 0]
        }
      },
      onLoad() {
        this.area = [this.area, this.area[0].child]
      },
      methods: {
        columnChange(e){
          switch (e.detail.column) {
            case 0:
            this.area = [this.area[0], this.area[0][e.detail.value].child]
          }
        },
        change(e){
          this.areaIndex = e.detail.value
        }
      },
    }
    

    转载自 点击进入原帖 https://www.anttoweb.com/kb/uniapp-select/

    展开全文
  • 在项目中,需要使用三联动,由于三是分开的,是三个请求,所以只能获取到选中的选项值,然后分别进行请求。 在项目中我引入了vue,使用axios进行请求。 效果如下: 过程: 使用$event来进行获取下拉选项的value...

    在项目中,需要使用三级联动,由于三级是分开的,是三个请求,所以只能获取到选中的选项值,然后分别进行请求。
    在项目中我引入了vue,使用axios进行请求。
    效果如下:
    在这里插入图片描述
    过程:

    使用$event来进行获取下拉选项的value值。

    <div class="layui-form-item">
              <label class="layui-form-label">学校选择:</label>
        <select v-model="Sch" @change="change($event)">
            <option v-for="item in schools" :value="item.schoolName">{{item.schoolName}}</option>
        </select>
    </div>
    <div class="layui-form-item">
              <label class="layui-form-label">专业选择:</label>
                          一级:
        <select v-model="One" @change="change1($event)">
            <option v-for="item in specialOnes" :value="item.specialOneId">{{item.specialOneName}}</option>
        </select>
            二级:
        <select v-model="Two" @change="change2($event)">
            <option v-for="item in specialTwos" :value="item.specialTwoId">{{item.specialTwoName}}</option>
        </select>
           三级:
        <select v-model="Three" @change="change3($event)">
            <option v-for="item in specialThrees" :value="item.specialName">{{item.specialName}}</option>
        </select>
    </div>
    
    // 获得学校id
    change(event) {
     	this.Sch = event.target.value; //获取option对应的value值
    },
    
    // 根据选中的一级的id获取所属二级专业
    change1(event) {
     	this.One = event.target.value; //获取option对应的value值
     	//axios部分
    },
    // 根据选中的二级的id获取所属三级专业
    change2(event) {
     	this.Two = event.target.value; //获取option对应的value值
     	//axios部分
    },
    // 获得三级id
    change3(event) {
     	this.Three = event.target.value; //获取option对应的value值
    },
    

    出现的问题:
    在切换一级专业后,后面的二三级专业下拉选框里依旧存在选项,所以在一级专业的方法中,将二三级的数据进行一下清空即可。

    展开全文
  • 这是一个商品表,记录了商品的分类,分三类,顶级分类、一级分类、二级分类 在编辑修改商品的信息的视图 先得给控制器传递商品的 id ,根据 id 获取商品全部信息,以及获取所有分类信息 然后进行家谱树查找...

     

    这是一个商品表,记录了商品的分类,分三类,顶级分类、一级分类、二级分类

     

    在编辑修改商品的信息的视图

     

    先得给控制器传递商品的 id ,根据 id 获取商品全部信息,以及获取所有分类信息

     

    然后进行家谱树查找,参数为分类信息-数组,商品的分类id-整型

     

    这样子得到了,子对父的二维数组,

     

    将此二维数组,进行无限极分类,得到三位数组

     

    第一维就是顶级分类,第二维是一级分类,第三维是二级分类

     

    把得到的这个数组传给视图,循环遍历,输出值给option即可

     

    家谱树代码:

     

    /**
    * 家谱树,通过子id找父id
    * @param array $data 待分类的数据
    * @param int /string $pid 要找的祖先节点
    * @return array
    */
    function Ancestry($data , $pid) {
    static $ancestry = array();

    foreach($data as $key => $value) {
    if($value['id'] == $pid) {
    $ancestry[] = $value;

    Ancestry($data , $value['parent_id']);
    }
    }
    return $ancestry;
    }


    无限极分类为多维数组

    /**
    * 把无限极分类重组成多维数组
    * @param $array
    * @param int $pid
    * @return array
    */
    function dataTree($array, $pid = 0){
    $arr = [];
    foreach ($array as $item) {
    if ($item['parent_id'] == $pid){
    $tmp = dataTree($array,$item['id']);
    $tmp && $item['son'] = $tmp;
    $arr[] = $item;
    }
    }
    return $arr;
    }
     

    转载于:https://www.cnblogs.com/muwu/p/8934389.html

    展开全文
  • layuiadmin动态模板在联动下拉选框中的使用
  • 下拉选框(单个和多级联查)

    千次阅读 2018-05-15 10:51:41
    二级下拉框html &lt;div class="control-group"&gt; &lt;label class="col-sm-1 control-label" style="padding-right: 0px;"&gt;接单区域:&lt;/...
  • weui下拉选框——学习总结

    千次阅读 2018-01-13 13:51:00
    weui picker二级联动 title > < link rel ="stylesheet" type ="text/css" href ="https://cdn.bootcss.com/weui/1.1.2/style/weui.css" /> < style type ="text/css" > a { display : inline-...
  • vue实现下拉菜单二级联动效果1、实现效果2、后端返回的数据格式3、vue页面中 1、实现效果 2、后端返回的数据格式 "list": [ { "id": "1178214681118568449", "title": "后端开发", "children": [ { "id": ...
  • 今天学习了jQuery中的Ajax,简单的实现一个二级联动的实例,废话不多说,直接上代码 //这是jsp代码 &lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding=...
  • jQuery实现二级联动下拉框

    千次阅读 2017-08-08 19:12:14
    jQuery实现二级联动下拉框
  • VB6 在窗体菜单中加入Radio单选按钮和Check复选按钮,平时我们已经见到过了,虽然比较小的应用,不过挺实用,用了会增加软件体验,为用户操作提供方便,Windows系统里就有,好像见惯不惯了。
  • // 数组 cityArr 的值就等于遍历得到的 obj.sub 数组 } } } 此时,cityArr的值就能根据我们第一个下拉框的选择来动态更新了,随后第个下拉框直接遍历这个数组就OK了 {{item.name}} {{item.name}} image.png 第三...
  • ajax 实现 (全国,省,是,区....) N级联 Demo js: <script type="text/javascript"> $(function () { $.fn.CascadeSelect({ url: '/CascadeSelect/CascadeSelect.ashx', //返回Json数据的一般处理文件 ...
  • (根据需求打不打开)效果如下: 下面是js代码 /** 下拉框的二级联动*/ function linkageValue(){ $("#projectId").change(function(){ //如果是回显显示的页面,当再次出发第一个下拉框的时候,需要刷新...
  • 这是一个微信两联动的省市的选择,大家可以模仿写三联动
  • 省市区三分类组件第一步: 安装插件第步: 省市区三分类组件代码:第三步: 在父组件中的代码: 第一步: 安装插件 npm i element-china-area-data@5.0.2 -S 第步: 省市区三分类组件代码: <template> &...
  • 小程序二级联动下拉框 vant picker

    千次阅读 2019-11-30 22:03:46
    vant官方提供得例子是什么鬼,谁家数据结构会是这种。。。无语了 const citys = { '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州'], '福建': ['福州', '厦门', '莆田', '三明', '泉州'] ...
  • } //渲染第一个搜索框 load内有两个参数,第一个参数为id关联的搜索框,第个参数为请求的接口 //->ignore() 这个是在搜索时不提交。 $filter->equal('parent_id')->select($sections)-> width(3)->load('id','/...
  • html中得省市下拉框二级级联实现

    万次阅读 热门讨论 2017-12-08 11:03:46
    省市二级级联指的是选中某个省,市得下拉框option根据选择得省份来改变,具体意思大致如下图: 具体实现: 1.新建一个info.js文件,存放省市信息。内容如下: //保存省份数组 var provinceArr = []; provinceArr[0]...
  • Table表格的二级联动

    2019-07-07 18:23:42
    网上搜寻一番后发现大多数例子都是对下拉选框二级联动,最常用的应该就是省市区的选择了吧。 【复现select下拉选框二级联动】 两个下拉选框,一个定义市一个定义区;区随市的变化而变化。 为市对应的下拉列表...
  • Ztree下拉树(带勾选框) 例子样式 下拉带勾选框且父子节点联动多选 代码(带勾选框) html 第一个input框时是存放勾选数据的id 第个input框存放勾选数据的name 第三个ul是展示ztree树 <div class="pull-right...
  • 使用jQuery制作级联下拉列表框

    千次阅读 2017-11-22 11:03:19
    一 代码 fun.js // JavaScript Document ... $.get("returnpc.php?flag=p", null, function(data){ //向服务器发送GET请求,获取省份的值,并将结果追加到省份下拉列表中 $("#p").append(data);
  • 你的位置:问答吧->... 问题详情PHP怎样选择下拉菜单就搜索...选择下拉菜单: - - - - Required Selected 选择N的话,搜索数据表course中的course_type为N的值到文本框中去选择R的话,搜索数据表course中的course...
  • 在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.0版本中的应用,需要的朋友可以参考下
  • Android中Spinner下拉选项框。
  • 很多小伙伴在用laravel-admin 开发后台时都会遇到select二级联动编辑时默认值选中的问题,此文章教你解决这个问题。 $bb = url( 'child' ); $form->select( 'classification' , __( '分类' ) )->options( $...
  • 用户选择第下拉列表框时,第三个下拉列表框的值也将随之发生变化。  (2)在三个下拉列表框中,无论选择哪一个下拉列表框,都将各个下拉列表框当前选择的内容显示在页面中。 功能实现: &lt;scri...
  • 提供了很多方向,鉴于本人爬虫能力很弱,我选择基于环境云网站提供的API接口,实现了天气预报功能以及过去的天气数据分析功能,其中对于我来说比较困难的是如何实现覆盖全国的省市县下拉列表的实现,下面是我的实现...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 805
精华内容 322
关键字:

二级下拉选框

友情链接: 18424446.zip