87,994
社区成员
发帖
与我相关
我的任务
分享求大神，小弟刚学不久，在线等~,正在学DOM
<body>
<div id="content">
<!-- 点击按钮，子元素移动跑到对方的标签中。 -->
<!-- 倒序和正序都可以 -->
<select name="" id="sel1" size="6" multiple>
<option value="0">香蕉</option>
<option value="1">苹果</option>
<option value="2">桑葚</option>
<option value="3">葡萄</option>
<option value="4">梨子</option>
<option value="5">西瓜</option>
<option value="6">木瓜</option>
<option value="7">芒果</option>
<option value="8">草莓</option>
<option value="9">桃子</option>
</select>
<input type="button" value=">>>>"/>
<input type="button" value="<<<<"/>
<input type="button" value=">"/>
<input type="button" value="<"/>
<select name="" id="sel2" size="6" multiple>
</select>
</div>
<script>
</script>
<div id="content">
<!-- 点击按钮，子元素移动跑到对方的标签中。 -->
<!-- 倒序和正序都可以 -->
<select name="" id="sel1" size="6" multiple>
<option value="0">香蕉</option>
<option value="1">苹果</option>
<option value="2">桑葚</option>
<option value="3">葡萄</option>
<option value="4">梨子</option>
<option value="5">西瓜</option>
<option value="6">木瓜</option>
<option value="7">芒果</option>
<option value="8">草莓</option>
<option value="9">桃子</option>
</select>
<input type="button" value=">>>>"/>
<input type="button" value="<<<<"/>
<input type="button" value=">"/>
<input type="button" value="<"/>
<select name="" id="sel2" size="6" multiple>
</select>
</div>
<script>
</script>
...全文
请发表友善的回复…
发表回复
天际的海浪 2017-04-17
- 打赏
- 举报
<div id="content">
<!-- 点击按钮，子元素移动跑到对方的标签中。 -->
<!-- 倒序和正序都可以 -->
<select name="" id="sel1" size="6" multiple>
<option value="0">香蕉</option>
<option value="1">苹果</option>
<option value="2">桑葚</option>
<option value="3">葡萄</option>
<option value="4">梨子</option>
<option value="5">西瓜</option>
<option value="6">木瓜</option>
<option value="7">芒果</option>
<option value="8">草莓</option>
<option value="9">桃子</option>
</select>
<input type="button" value=">>>>" onclick="allRightMove()"/>
<input type="button" value="<<<<" onclick="allLeftMove()"/>
<input type="button" value=">" onclick="rightMove()"/>
<input type="button" value="<" onclick="leftMove()"/>
<select name="" id="sel2" size="6" multiple>
</select>
</div>
<script>
var sel1 = document.getElementById("sel1");
var sel2 = document.getElementById("sel2");
function allRightMove() {
var op = sel1.getElementsByTagName("option");
for (var i = 0, len = op.length; i < len; i++) {
sel2.appendChild(op[0]);
}
}
function allLeftMove() {
var op = sel2.getElementsByTagName("option");
for (var i = 0, len = op.length; i < len; i++) {
sel1.appendChild(op[0]);
}
}
function rightMove() {
var op = sel1.getElementsByTagName("option");
for (var i = 0; i < op.length; i++) {
if (op[i].selected)
sel2.appendChild(op[i--]);
}
}
function leftMove() {
var op = sel2.getElementsByTagName("option");
for (var i = 0; i < op.length; i++) {
if (op[i].selected)
sel1.appendChild(op[i--]);
}
}
</script>
