动态添加选择区


<script type="text/javascript">
if (window.ActiveXObject && !window.XMLHttpRequest){
window.XMLHttpRequest=function(){
return new ActiveXObject((navigator.userAgent.toLowerCase().indexOf('msie 6') != -1) ? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP');
};
}//取得XMLHttpRequest对象
var req;
var flagSelect;
var hereClasses = new Array(3);

function testName(flag,obj)//使用Ajax访问服务器
{
var value = obj.value;
flagSelect = flag; //标记一下当前是选择省,还是选择市
if(flagSelect == "1"){
//hereClasses[0] = obj.options[obj.selectedIndex].text;
//document.getElementById("hereClassDiv").innerHTML = hereClasses[0];
}
if(flagSelect == "2"){
//hereClasses[1] = obj.options[obj.selectedIndex].text;
//document.getElementById("hereClassDiv").innerHTML = hereClasses[0] + " > " + hereClasses[1];
}
if(flagSelect == "3"){
//hereClasses[2] = obj.options[obj.selectedIndex].text;
//document.getElementById("hereClassDiv").innerHTML = hereClasses[0] + " > " + hereClasses[1] + " > " + hereClasses[2];
return;
}
req=new XMLHttpRequest();
if (req)
{
req.onreadystatechange=setValue;
}
req.open('POST',"hereClassSelect.do?method=selectHereClass&flag="+flag+"&value="+value);//把参数带到服务器中
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
req.send(null);
}
function setValue()
{
if (req.readyState==4 )//访问到服务器
{
if(req.status==200)//正确返回
{
if(flagSelect=="1")//如果选择某个省要更新市和区
{
var v=req.responseText;//req.responseText是服务器返回来的字符串
paint(document.getElementById("hereSecondClass"),v); //更新市下拉框
paint(document.getElementById("hereThirdClass"),""); //清空区下拉框

}
if(flagSelect=="2")//如果选择某市,只需改变区
{
var v=req.responseText;
paint(document.all("hereThirdClass"),v); //更新区下拉框
}
}
}
}
function paint(obj,value)//根据一对数据去更新一个下拉框
{
var v=value.split(";"); //得到一些数据,(修改过了..)
obj.options.length=0; //先清空原来的数据

for(var i=0;i<v.length-1;i++)//把新得到的数据显示上去
{
var option = new Option(v[i].split(",")[1], v[i].split(",")[0]);
obj.add(option);
}
}
</script>


<select id="hereFirstClass" name="hereFirstClass" style="width:130"
size="8" onchange="testName(1,this);">
<c:forEach items="${hereFirstClasses}" var="hereFirstClass" >
<option value="${hereFirstClass.id }">${hereFirstClass.classNameZh }</option>
</c:forEach>

</select>

<select id="hereSecondClass" name="hereSecondClass" style="width:130"
size="8" onchange="testName(2,this);">
</select>

<select id="hereThirdClass" name="hereSecondClass" style="width:130"
size="8" onchange="testName(3,this);">
</select>
<div class="add_Delete"><input type="button" value="↓填加" onclick="addline()"/>
<input type="button" value="x 删除" onclick="delline()"/></div>
<script type="text/javascript" >
function addline() {
var num = document.getElementById("select1");
if(num.length>5) {
alert("最多只能添加6行");
return false;
}
var obj;
obj = document.createElement("option");

var obj1 = document.getElementById("hereFirstClass");
var obj2 = document.getElementById("hereSecondClass");
var obj3 = document.getElementById("hereThirdClass");
if(document.getElementById("hereFirstClass").value=="") {
alert("请选择主营行业");
return false;
}
var hereFirstValue = document.getElementById("hereFirstClass").value;
var hereFirstName = document.getElementById("hereFirstClass").options[obj1.selectedIndex].text;

if(document.getElementById("hereSecondClass").value=="") {
obj.value = hereFirstValue;
obj.text = hereFirstName;
document.getElementById("select1").add(obj);
}else if(document.getElementById("hereThirdClass").value=="") {
var hereSecondValue = document.getElementById("hereSecondClass").value;
var hereSecondName = document.getElementById("hereSecondClass").options[obj2.selectedIndex].text;
obj.value = hereFirstValue+"//"+hereSecondValue;
obj.text = hereFirstName+"//"+hereSecondName;
document.getElementById("select1").add(obj);
}else{
var hereThirdValue = document.getElementById("hereThirdClass").value;
var hereThirdName = document.getElementById("hereThirdClass").options[obj3.selectedIndex].text;
var hereSecondValue = document.getElementById("hereSecondClass").value;
var hereSecondName = document.getElementById("hereSecondClass").options[obj2.selectedIndex].text;
obj.value = hereFirstValue+"//"+hereSecondValue+"//"+hereThirdValue;
obj.text = hereFirstName+"//"+hereSecondName+"//"+hereThirdName;
document.getElementById("select1").add(obj);
}

}

function delline() {
document.all.select1.options.remove(document.all.select1.selectedIndex);
document.all.select1.selectIndex=0;
}

</script>

好的,关于ant design级联选择动态省市如何动态添加数据用代码实现,我可以为你解答。 首先,需要引入Antd的级联选择器组件: ``` import { Cascader } from 'antd'; ``` 然后定义级联选择器的数据源,比如一个省市数据的数组: ``` const options = [ { value: '北京市', label: '北京市', children: [ { value: '东城', label: '东城', }, { value: '西城', label: '西城', }, ], }, { value: '上海市', label: '上海市', children: [ { value: '黄浦', label: '黄浦', }, { value: '徐汇', label: '徐汇', }, ], }, ]; ``` 将数据源作为级联选择器的options属性值: ``` <Cascader options={options} /> ``` 这样就可以展示出级联选择器了。如果需要动态添加数据,可以通过setState方法改变options的值: ``` const [options, setOptions] = useState([ { value: '北京市', label: '北京市', children: [ { value: '东城', label: '东城', }, { value: '西城', label: '西城', }, ], }, { value: '上海市', label: '上海市', children: [ { value: '黄浦', label: '黄浦', }, { value: '徐汇', label: '徐汇', }, ], }, ]); const addData = () => { const newOptions = [ ...options, { value: '广东省', label: '广东省', children: [ { value: '广州市', label: '广州市', }, { value: '深圳市', label: '深圳市', }, ], }, ]; setOptions(newOptions); }; <Cascader options={options} /> <button onClick={addData}>点击添加数据</button> ``` 这样点击添加数据按钮后,广东省和其中的两个市就会动态添加到级联选择器中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值