前端开发者前端开发工程师英语|前端开发小工具|前端开发工作内容描述
html 代码
<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8″>
<title>什么是前端项目开发:js选择下拉框</title>
<style>
option {
border-bottom: 1px dashed #ebebeb;
}
#div1 {
width: 100px;
height: 20px;
border: 1px solid #ebebeb;
margin-left: 115px;
}
</style>
</head>
<body>
选定一项或多项后点击添加或移除(按住shift或ctrl可以多选)或在选择项上双击进行添加和移除
<div id=”div1″></div>
<form action=”post” name=”myForm”>
<table border=”0″ width=”300″>
<tr>
<td width=”40%”>
<!– multiple表示是否允许多项选择–>
<select style=”width:100%;” multiple name=”list1″ size=”12″ ondblclick=”moveOption(document.myForm.list1, document.myForm.list2)”>
<option value=”微微一笑很倾城”>微微一笑很倾城</option>
<option value=”如果时间能静止”>如果时间能静止</option>
<option value=”一笑倾城”>一笑倾城</option>
<option value=”下一秒”>下一秒</option>
<option value=”认真的雪”>认真的雪</option>
<option value=”微微一笑很倾城”>微微一笑很倾城</option>
<option value=”如果时间能静止”>如果时间能静止</option>
<option value=”一笑倾城”>一笑倾城</option>
<option value=”下一秒”>下一秒</option>
<option value=”认真的雪”>认真的雪</option>
<option value=”微微一笑很倾城”>微微一笑很倾城</option>
<option value=”如果时间能静止”>如果时间能静止</option>
<option value=”一笑倾城”>一笑倾城</option>
<option value=”下一秒”>下一秒</option>
<option value=”认真的雪”>认真的雪</option>
<option value=”微微一笑很倾城”>微微一笑很倾城</option>
<option value=”如果时间能静止”>如果时间能静止</option>
<option value=”一笑倾城”>一笑倾城</option>
<option value=”下一秒”>下一秒</option>
<option value=”认真的雪”>认真的雪</option>
<option value=”微微一笑很倾城”>微微一笑很倾城</option>
<option value=”如果时间能静止”>如果时间能静止</option>
<option value=”一笑倾城”>一笑倾城</option>
<option value=”下一秒”>下一秒</option>
<option value=”认真的雪”>认真的雪</option>
<option value=”微微一笑很倾城”>微微一笑很倾城</option>
<option value=”如果时间能静止”>如果时间能静止</option>
<option value=”一笑倾城”>一笑倾城</option>
<option value=”下一秒”>下一秒</option>
<option value=”认真的雪”>认真的雪</option>
<option value=”微微一笑很倾城”>微微一笑很倾城</option>
<option value=”如果时间能静止”>如果时间能静止</option>
<option value=”一笑倾城”>一笑倾城</option>
<option value=”下一秒”>下一秒</option>
<option value=”认真的雪”>认真的雪</option>
</select>
</td>
<td width=”20%” align=”center”>
<!– 选中要添加的项，把list1中的元素添加到list2中–>
<input type=”button” value=”添加” onclick=”moveOption(document.myForm.list1,document.myForm.list2)” />
<br/>
<br/>
<input type=”button” value=”全选” onclick=”moveAllOption(document.myForm.list1,document.myForm.list2)” />
<br/>
<br/>
<!– 选中要删除的项，把list2中元素添加到list1中–>
<input type=”button” value=”移除” onclick=”moveOption(document.myForm.list2,document.myForm.list1)” />
<br/>
<br/>
<input type=”button” value=”全删” onclick=”moveAllOption(document.myForm.list2,document.myForm.list1)” />
<br/>
<br/>
</td>
<td width=”40%”>
<select style=”width:100%;” multiple name=”list2″ size=”12″ ondblclick=”moveOption(document.myForm.list2, document.myForm.list1)”></select>
</td>
</tr>
</table>
</form>
<script>
//获得list1中的值
// options:控件中所有option元素
// remove(index)：移除给定位置的选项
// add(newOption,relOption):相控件中插入新option元素，其位置在相关项(relOption）之前
var div1 = document.getElementById(“div1”);
// var div2=document.getElementById(“div2”);
function getvalue(geto) {
var allvalue = “”;
for (var i = 0; i < geto.options.length; i++) {
allvalue += geto.options[i].value + “,”
}
return allvalue;
}
function moveOption(e1, e2) {//选中的一项添加到list2中，用selected确定选择了哪一项，e1代表list1中的option元素，e2代表list2中的option元素
for (var i = 0; i < e1.options.length; i++) {
if (e1.options[i].selected) {//如果被选中
var e = e1.options[i];
e2.options.add(new Option(e.text, e.value));//把list1中选择的项的值添加到list2中
e1.remove(i);//同时删除list1中的被选中的项
i = i – 1;
}
}
div1.innerHTML = i;
document.myForm.value = getvalue(document.myForm.list2);//把值添加到list2中
}
//把list1中的值全部添加到list2中
function moveAllOption(e1, e2) {//添加全部
for (var i = 0; i < e1.options.length; i++) {
var e = e1.options[i];
e2.options.add(new Option(e.text, e.value));//把list1中的值添加到list2
e1.remove(i);//删除list1中的值
i = i – 1;
}
document.myForm.value = getvalue(document.myForm.list2);//把值添加到list2中
}
</script>
</body>
</html>
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册