m0_59138433 2021-09-30 14:31 采纳率: 100%
浏览 48
已结题

想了好久,还是写不出来,在dw中制作选取界面

img

  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2021-09-30 14:42
    关注

    select联动,需要用到js来实现,纯css无法实现,题主要的示例代码如下,修改下配置信息即可使用,有帮助麻烦点个采纳【本回答右上角】,谢谢~~有其他问题可以继续交流~

    <title>javascript省市县联动示例</title>
    省:<select id="pro">
        <option value="">请选择省</option>
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">广西</option>
    </select>
    市:<select id="city"><option value="">请选择市</option></select>
    县:<select id="town"><option value="">请选择市</option></select>
    <script>
        //市数据结构,为json数组对象。数组小标为省的id,数组项为市json数据。。
        var arrCity = [];
        arrCity[1] = [{ t: '北京市', id: 1 }];
        arrCity[2] = [{ t: '上海市', id: 2 }];
        arrCity[3] = [{ t: '南宁市', id: 3 }, { t: '桂林市', id: 4 }, { t: '柳州市', id: 5 }];
        //如果还有县的联动,同理生成arrTown即可
        var arrTown = [];
        arrTown[1] = [{ t: '东城区', id: 1 }, { t: '海淀区', id: 2 }]
        arrTown[2] = [{ t: '黄埔区', id: 4 }, { t: '静安区', id: 5 }]
        arrTown[3] = [{ t: '青秀区', id: 6 }]
        arrTown[4] = [{ t: '七星区', id: 7 }, { t: '象山区', id: 8 }, { t: '秀峰区', id: 9 }]
        arrTown[5] = [{ t: '鱼峰区', id: 10 }, { t: '拉堡', id: 11 }]
        document.getElementById('pro').onchange = function () {
            addOptions(document.getElementById('city'), arrCity[this.value]);
            document.getElementById('city').onchange();//同时加载城镇
        }
        document.getElementById('city').onchange = function () {
            addOptions(document.getElementById('town'), arrTown[this.value]);
        }
        function addOptions(s, arr, initValue) {
            if (!arr || arr.length == 0) arr = [{ t: '请选择市', id: '' }];
            if (!s) { alert('select对象不存在!'); return false }
            s.options.length = 0;
            var selectedIndex = 0;
            for (var i = 0; i < arr.length; i++) {
                s.options.add(new Option(arr[i].t, arr[i].id));
                if (arr[i].id == initValue) selectedIndex = i;
            }
        }
    </script>
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 10月29日
  • 已采纳回答 10月21日
  • 创建了问题 9月30日

悬赏问题

  • ¥15 微信夜间被转走了1w对,当天手机剪切板里就出现了这个乱码,有铁子可以看看是啥吗可以
  • ¥50 跑通github上的代码 深度学习 pytorch
  • ¥50 求写,批处理调用分区助手分区脚本
  • ¥15 求购HI3519AV100开发板
  • ¥15 请问1553 RT怎么测试,没有BC有方法吗
  • ¥100 业务编程如何选择学习方向和内容?
  • ¥15 wamp3.3.5安装完成后图标正常显示绿色,鼠标左右键点击图标均无反应。求解决方法。
  • ¥15 鼠标点击的这条记录了什么?
  • ¥15 在写pid调速的程序时,电机始终维持最大速度
  • ¥15 【有偿】调用DXGI截图初始化失败,提示0xf 887a0004