关于两个select的联动
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于两个select的联动相关的知识，希望对你有一定的参考价值。
现在有SELECT A 和 SELECT B
SELECT A 里面有值 A B C
SELECT B 里面有值 H Y Z
我的要求很简单，如何联动他们，
A的时候 对应H
B的时候 对应Y
C的时候 对应Z
顺序是正的..
麻烦大虾帮帮偶，js vbscript 都可以..
补充一下：
我指的是html页面中的select不是数据库
三根鞋带 兄台的太复杂了，偶的就是一级而已..
//定义了城市的二维数组，里面的顺序跟省份的顺序是相同的。通过selectedIndex获得省份的下标值来得到相应的城市数组
var city=[
["北京","天津","上海","重庆"],
["南京","苏州","南通","常州"],
["福州","福安","龙岩","南平"],
["广州","潮阳","潮州","澄海"],
["兰州","白银","定西","敦煌"]
];
function getCity()
//获得省份下拉框的对象
var sltProvince=document.form1.province;
//获得城市下拉框的对象
var sltCity=document.form1.city;
//得到对应省份的城市数组
var provinceCity=city[sltProvince.selectedIndex - 1];
//清空城市下拉框，仅留提示选项
sltCity.length=1;
//将城市数组中的值填充到城市下拉框中
for(var i=0;i<provinceCity.length;i++)
sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);
</script>
</HEAD>
<BODY>
<FORM METHOD=POST ACTION="" name="form1">
<SELECT NAME="province" onChange="getCity()">
<OPTION VALUE="0">请选择所在省份 </OPTION>
<OPTION VALUE="直辖市">直辖市 </OPTION>
<OPTION VALUE="江苏省">江苏省 </OPTION>
<OPTION VALUE="福建省">福建省 </OPTION>
<OPTION VALUE="广东省">广东省 </OPTION>
<OPTION VALUE="甘肃省">甘肃省 </OPTION>
</SELECT>
<SELECT NAME="city">
<OPTION VALUE="0">请选择所在城市 </OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>本回答被提问者采纳 参考技术B select case select * form A
case A
select * form B where 条件='H'
case B
select * form B where 条件='Y'
case C
select * form B where 条件='Z'
end select
多级联动的select框
JS文件：
; (function($, w) { var LinkSelect = function(config) { var opt = { doms: config.doms || [], url: config.url || ‘‘, type: config.type || ‘get‘, data: config.data || [] }; if (opt.doms.length < 2) { return console.log(‘必须两个或两个以上下拉框‘); } function initial() { for (var i = 0; i < opt.doms.length; i++) { (function(idx) { opt.doms[idx].on(‘change‘, function () { var val = $(this).val(); var temp = getDataByValue(idx); var nextDom = opt.doms[idx + 1]; if (nextDom && nextDom.length > 0) { setDomData(nextDom, temp); } }); })(i); } if (opt.data && opt.data.length > 0) { initialUi(); } else { if (!opt.url || opt.url === ‘‘) { return console.log(‘配置无效，必须指定url或data‘); } else { $.ajax({ url: opt.url, type: opt.type, success: function(response) { opt.data = response; initialUi(); } }); } } } function initialUi() { var dom = opt.doms[0]; setDomData(dom, opt.data); } function getDataByValue(idx) { var source = opt.data; for (var i = 0; i <= idx; i++) { (function(idx) { var temp = source.find(function(item) { return item.value.toString() === opt.doms[idx].val(); }); if (temp && temp.children) { source = temp.children; } else { source = []; } })(i); } return source; } function resetDom(dom) { dom.html(‘<option value="">请选择</option>‘); } function setDomData(dom, data) { if (!data || data.length === 0) { resetDom(dom); } else { var html = ‘<option value="">请选择</option>‘; $.each(data, function(idx, item) { html += ‘<option value="‘ + item.value + ‘">‘ + item.text + ‘</option>‘; }); dom.html(html); } dom.trigger(‘change‘); } initial(); }; w.LinkSelect = LinkSelect; })(jQuery, window);
页面结构
<div class="container"> <h2>Index</h2> <hr /> <div class="form-box"> <div class="row"> <div class="label">年级</div> <div class="control"> <select id="grade"></select> </div> </div> <div class="row"> <div class="label">班级</div> <div class="control"> <select id="clazz"></select> </div> </div> <div class="row"> <div class="label">组</div> <div class="control"> <select id="group"></select> </div> </div> </div> </div>
使用方法：
<script src="lib/myui/LinkSelect.js"></script> <script> var ls = new LinkSelect({ doms: [$(‘#grade‘), $(‘#clazz‘), $(‘#group‘)], data: [ { text: ‘苗班‘, value: 1, children: [ { text: ‘苗1班‘, value: 1, children: [ { text: ‘1组‘, value: 1, children: [] }] }, { text: ‘苗2班‘, value: 2, children: [] }] }, { text: ‘小班‘, value: 2, children: [ { text: ‘小1班‘, value: 3, children: [] }] }, { text: ‘中班‘, value: 3, children: [ { text: ‘中1班‘, value: 4, children: [] }, { text: ‘中2班‘, value: 5, children: [] }] }] }) </script>
以上是关于关于两个select的联动的主要内容，如果未能解决你的问题，请参考以下文章
vue 使用select写的二级联动，怎么给两个都设置一个默认的初始值？