JavaScript实例第十一天
作者：互联网
2021.10.30
实例一、动态添加下拉列表选项框
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动态添加下拉列表选项框</title>
</head>
<body>
<div id="id-vi-center">
<select name="id-selectColor" id="id-select">
<option>请选择...</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
<p>请选择颜色:</p><br>
<input type="radio" name="red" value="red" onClick="stSelValue(this.id)">Red
<input type="radio" name="red" value="green" onClick="stSelValue(this.id)" >Green
<input type="radio" name="red" value="blue" onClick="stSelValue(this.id)">Blue<!-- 当radio多个选项的name值属性相同时表示成单选，只能选一个 -->
</div>
</body>
<script type="text/javascript">
window.onload=function(ev){
var idSel=document.getElementById("id-select");
var arrRadio=document.getElementsByName("radio");
for(var i=0;i<arrRadio.length;i++){
if(arrRadio[i].checked){
idSel.value=arrRadio[i].value;
}
}
}
function stSelValue(val){
var idSel=document.getElementById("id-select");
idSel.value=val;
}
</script>
</html>
实例二、动态添加下拉列表框选项
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动态添加下拉列表框选项</title>
</head>
<body>
<div id="id-vid-center">
<table>
<tr>
<th>设置颜色：</th>
<td>
<select name="selSetColor" id="idSel">
<option>请选择...</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</td>
<th>添加颜色:</th>
<td><input type="button" id="id-add-color" value="添加颜色" onClick="addColor()"></td>
</tr>
<tr>
<td></td>
<td></td>
<td>value:</td>
<td><input type="text" id="id-sel-val" value=""></td>
</tr>
<tr>
<td></td>
<td></td>
<td>text:</td>
<td><input type="text" id="id-sel-text" value=""></td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
function addColor(){
var value=document.getElementById("id-sel-val");
var text=document.getElementById("id-sel-text");
var idSel=document.getElementById("idSel");
var val=value.value;
var te=text.value;
var opt=new Option(val,te);//第一个是value值，第二个是text值
idSel.options.add(opt);
}
</script>
</html>
实例三、动态删除下拉列表框选项
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动态删除下拉列表框选项</title>
</head>
<body>
<div id="id-div-center">
<table>
<tr>
<th>设置颜色：</th>
<td>
<select name="selSetColor" id="idSel">
<option>请选择...</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</td>
</tr>
<tr>
<td>删除选项:</td>
<td><input type="button" id="id-remove" value="删除颜色" onClick="removeColor()"></td>
</tr>
<tr>
<td>全部删除:</td>
<td><input type="button" id="id-allremove" value="全部删除" onClick="removeAllColor()"></td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
function removeColor(){
var idSel=document.getElementById("idSel");
idSel.options.remove(idSel.selectedIndex);//选择框内是哪个颜色就会对应颜色的指数，删除该颜色
}
function removeAllColor(){
var idSel=document.getElementById("idSel");
idSel.options.length=0;
}
</script>
</html>
实例四、二级联动下拉列表框
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>二级联动下拉列表框</title>
</head>
<body>
<div id="id-div-center">
<form name="form2sel">
大洲:
<select name="continent" onchange="sel_country()"><!-- onchange在值改变时触发 -->
<option value="0">选择大洲...</option>
<option value="亚洲">亚洲</option>
<option value="欧洲">欧洲</option>
<option value="美洲">美洲</option>
</select>
国家:
<select name="country">
<option value="0">选择国家...</option>
</select>
</form>
</div>
</body>
<script type="text/javascript">
var country=[
["中国","日本","韩国"],
["英国","德国","法国"],
["美国","巴西","阿根廷"]
];
function sel_country(){
var selContinent=document.form2sel.continent;//获取大洲的下拉选择框对象
var selcountry=document.form2sel.conutry;//获取国家的下拉选择框对象
var arrcont=country[selContinent.selectedIndex-1];//获取大洲对应的国家数组,数组从0开始，所以要-1
// selcountry.length=1;
for(var i=0;i<arrcont.length;i++){
var atr=new Option(arrcont[i],arrcont[i])
selcountry[i+1].options.add(atr)//数组还原成下拉列表是，序号从1开始，+1
}
}
</script>
</html>
实例五、三级联动下拉列表
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>三级联动下拉列表框</title>
</head>
<body>
<div id="id-div-center">
<form name="form3sel">
大洲:
<select name="continent" onChange="sel_country()">
<option value="0">选择大洲...</option>
<option value="亚洲">亚洲</option>
<option value="欧洲">欧洲</option>
<option value="美洲">美洲</option>
</select>
国家:
<select name="country" onChange="sel_city()">
<option value="0">选择国家...</option>
</select>
城市:
<select name="city">
<option value="0">选择城市...</option>
</select>
</form>
</div>
</body>
<script type="text/javascript">
var country=[
["中国","日本","韩国"],
["英国","德国","法国"],
["美国","巴西","阿根廷"]
];
var city=[
[["北京","伤害","广州"],["东京","大阪","名古屋"],["首尔","仁用","济州"]],
[["伦敦","曼彻斯特","2"],["3","4","5"],["6","7","8"]],
[["9","10","11"],["12","13","14"],["15","16","17"]]
];
function sel_country(){
var selContinent=document.form3sel.continent;//州
var selCountry=document.form3sel.country;//国家
var selCity=document.form3sel.city;//城市
var arrContinentCountry=country[selContinent.selectedIndex-1]
selCountry.length=1;//清空国家
selCity.length=1;//清空城市
for(var i=0;i<arrContinentCountry.length;i++){
selCountry[i+1]=new Option(arrContinentCountry[i],arrContinentCountry[i])//将continetn的数值值赋值到selCountry中，完成选择州时国家的变化
}
}
function sel_city(){
var selContinent=document.form3sel.continent;//州
var selCity=document.form3sel.city;//城市
var selCountry=document.form3sel.country;//国家
var arrCountryCity=city[selCountry.selectedIndex-1]
selCity.length=1;
for(var i=0;i<arrCountryCity.length;i++){
selCity[i+1]=new Option(arrCountryCity[i],arrCountryCity[i])
}
}
</script>
</html>
三级联动，在二级联动的函数方法中将下拉列表的初始值清零（保留第一项），在二级选项框发生改变时触发三级联动，以此类推四级、五级…
实例六、可输入的下拉列表框
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>可输入的下拉列表框</title>
</head>
<body>
<style type="text/css">
div#id-div-center{
position: relative;/*position将元素从页面中分离出来,相对定位*/
width: 320px;
height: auto;
border: 0px solid black;/* #通过id匹配，对id为id-div-center进行css排版，*/
margin: 32px auto;/*外边距，auto自适应*/
padding: 2px;/*内边距*/
}
div#id-div-center span{
overflow: hidden;/*规定当前元素溢出时的处理，hidden内容被修剪，并且被修剪的内容没有滚轮，看不到*/
margin-left: 100px;
width:18px;
}
div#id-div-center select{
width: 128px;
margin-left: -100px;
}
div#id-div-center input{
position: absolute;/*绝对定位，脱离文档流的布局*/
width: 105px;
height: 14px;
left: 98px;
}
</style>
<div id="id-div-center" style="">
<span style="">
<select id="id-sel" onChange="sel_input(this.id)">
<option value="html">HTML</option>
<option value="js">JS</option>
<option value="css">CSS</option>
</select>
</span>
<input id="id-input" style="">
</div>
</body>
<script type="text/javascript">
function sel_input(thisid){
var sel=document.getElementById(thisid);
var input=document.getElementById("id-input")
input.value=sel.options[sel.selectedIndex].text;
}
</script>
</html>
这个css布局没写好，经验不足
标签：第十一天,idSel,JavaScript,value,实例,var,div,document,id 来源： https://blog.csdn.net/qq_51649346/article/details/121049784