<script language="JavaScript">
<!-- Begin
function BumpUp(abox) {
for(var i = 0; i < abox.options.length; i++) {
if(abox.options[i].value == "") {
for(var j = i; j < abox.options.length - 1; j++) {
abox.options[j].value = abox.options[j + 1].value;
abox.options[j].text = abox.options[j + 1].text;
}
var ln = i;
break;
}
}
if(ln < abox.options.length) {
abox.options.length -= 1;
BumpUp(abox);
}
}
/*删除选项移动操作*/
function remove(box) {
for(var i=0; i<box.options.length; i++) {
if(box.options[i].selected && box.options[i] != "") {
box.options[i].value = "";
box.options[i].text = "";
}
}
BumpUp(box);
}
/*选择框间单项移动操作*/
function inverse(oldbox,newbox) {
for(var i = 0; i < oldbox.options.length; i++) {
if(oldbox.options[i].selected && oldbox.options[i] != "") {
var no = new Option();
no.value = oldbox.options[i].value;
no.text = oldbox.options[i].text;
newbox.options[newbox.options.length] = no;
oldbox.options[i].value = "";
oldbox.options[i].text = "";
}
}
BumpUp(oldbox);
}
/*全移操作*/
function inverseAll(oldbox,newbox) {
for(var i = 0; i < oldbox.options.length; i++) {
var no = new Option();
no.value = oldbox.options[i].value;
no.text = oldbox.options[i].text;
newbox.options[newbox.options.length] = no;
oldbox.options[i].value = "";
oldbox.options[i].text = "";
}
oldbox.options.length = 0;
}
/*下移操作*/
function Movedown(ebox) {
for(var i = 0; i < ebox.options.length-1; i++) {
if(ebox.options[i].selected && ebox.options[i] != ""){
var tmpval = ebox.options[i].value;
var tmpval2 = ebox.options[i].text;
ebox.options[i].value = ebox.options[i+1].value;
ebox.options[i].text = ebox.options[i+1].text
ebox.options[i+1].value = tmpval;
ebox.options[i+1].text = tmpval2;
}
}
}
/*上移操作*/
function Moveup(ebox) {
for(var i = ebox.options.length-1; i > 0; i--) {
if(ebox.options[i].selected && ebox.options[i] != "") {
var tmpval1 = ebox.options[i].value;
var tmpval2 = ebox.options[i].text;
ebox.options[i].value = ebox.options[i-1].value;
ebox.options[i].text = ebox.options[i-1].text
ebox.options[i-1].value = tmpval1;
ebox.options[i-1].text = tmpval2;
}
}
}
// End -->
</script>
<form action="" method="post">
<table>
<tr>
<td>下拉列表框A:
<select multiple size=5 name="list1">
<option value="one" ondblclick="inverse(this.form.list1,this.form.list2)" >ASP</option>
<option value="two">PHP</option>
<option value="three">ASP.NET</option>
<option value="four">JAVA</option>
<option value="five">DELPHI</option>
</select>
</td>
<td>
<input type="button" value="->" onclick="inverse(this.form.list1,this.form.list2)" name="A1"><br>
<input type="button" value=">>" onclick="inverseAll(this.form.list1,this.form.list2)" name="A2"><br>
<input type="button" value="向上" onclick="Moveup(this.form.list1)" name="A3"><br>
<input type="button" value="向下" onclick="Movedown(this.form.list1)" name="A4"><br>
<input type="button" value="删除" onclick="remove(this.form.list1)" name="A5">
</td>
<td>
<input type="button" value="<-" onclick="inverse(this.form.list2,this.form.list1)" name="B1"><br>
<input type="button" value="<<" onclick="inverseAll(this.form.list2,this.form.list1)" name="B2"><br>
<input type="button" value="向上" onclick="Moveup(this.form.list2)" name="B3"><br>
<input type="button" value="向下" onclick="Movedown(this.form.list2)" name="B4"><br>
<input type="button" value="删除" onclick="remove(this.form.list2)" name="B5">
</td>
<td>下拉列表框B:
<select multiple size=5 name="list2">
</select>
</td>
</tr>
</table>
</form>
分享到:
相关推荐
js 特效 html 特效 控制选择框个数 js 特效 html 特效 控制选择框个数
控制选择框个数.rar控制选择框个数.rar控制选择框个数.rar控制选择框个数.rar控制选择框个数.rar控制选择框个数.rar控制选择框个数.rar控制选择框个数.rar控制选择框个数.rar控制选择框个数.rar控制选择框个数.rar
- **用法**:易语言中,使用“创建复选框”命令创建选择框,通过“设置复选框状态”命令控制其选中与否。 - **事件处理**:选择框也有“单击”事件,当用户点击选择框时,可以执行相应的代码逻辑。 - **应用示例*...
在JSP(Java Server Pages)页面中,日期选择框是一个常用的用户界面元素,它允许用户以图形化的方式选择日期。这种交互方式对于处理与日期相关的数据输入非常方便,例如在预订系统、日程安排或者记录生日等场景。在...
在程序中,可以通过读取或修改这个属性来控制选择框的状态,并可以响应其“改变”事件,根据用户的选择进行相应的操作。 3. **源码示例分析**:在“单选框选择框选中状态”的源码中,开发者可能展示了如何动态控制...
在Flash中,选择框通常由两个主要部分组成:一个可点击的按钮和一个下拉菜单。当用户点击按钮时,下拉菜单会显示一系列选项供用户选择。这种效果可以通过ActionScript(Flash的编程语言)和图形设计功能来实现。 ...
选择框的状态同样可以通过“设置部件状态”命令来控制,状态值为1表示选中,0表示未选中。选择框的“复选框被点击”事件可以用于实现用户交互逻辑。 3. 源码练习 这个压缩包中的源码提供了实际的代码示例,可以帮助...
本文将详细解析如何利用JS控制选择框(通常为复选框)的全选与取消全选功能,以及在此基础上实现批量操作。 ### 核心知识点:JS控制选择框全选/取消全选 #### 1. HTML结构定义 在HTML文档中,选择框(复选框)由`...
【标题】"仿QQ用户选择框"涉及到的知识点主要集中在用户界面设计和编程技术上,尤其是模拟QQ应用程序的交互体验。QQ作为一款流行的即时通讯软件,其用户界面设计具有高度的用户友好性和辨识度,因此在开发中进行仿制...
通过CSS,我们可以控制下拉选择框的样式,包括添加滚动条。例如,可以使用`overflow-y: auto;`来启用垂直滚动条,当内容超过选择框高度时自动显示。 2. **自定义滚动条样式**: 在一些现代浏览器中,可以通过CSS伪...
在网页设计中,选择框(Select)是一种常见的交互元素,用于让用户从预设的选项中进行选择。然而,原生的HTML `<select>` 元素样式单一,难以满足现代网页的美观需求。针对这一问题,开发者们通常会采用自定义 ...
在控制选择框个数的场景中,我们需要获取到`<select>`元素,这可以通过`document.getElementById()`、`document.querySelector()`或`document.querySelectorAll()`等方法实现。获取元素后,可以使用`.innerHTML`、`....
5. **程序流程控制**:源码中可能会包含条件语句(如If...Then...Else...)、循环语句(如For...Next)等,用于根据单选框和选择框的状态执行不同的操作。 6. **用户输入验证**:在实际应用中,可能需要验证用户的...
在iOS开发中,下拉选择框(Dropdown)是一种常见的用户界面元素,用于提供多个选项让用户进行选择。在标题“下拉选择框”中,我们可以理解为这是一个关于如何在iOS应用中实现类似功能的教学或示例。描述中的链接提供...
在Android开发中,自定义日期选择框是一种常见的需求,它允许用户以更加直观和友好的方式选择日期。Android系统提供了一些内置的日期选择组件,如DatePicker,但有时这些组件可能无法满足开发者对于界面设计和用户...
它指的是在一个选择框中,当用户选择某一选项时,下一个关联的选择框会根据前一个选择的结果动态更新其选项,这一过程可以延续到第三个甚至更多的选择框。这种设计能够帮助用户快速定位和筛选信息,提高操作效率。 ...
CSS3的Flexbox和Grid布局系统可以帮助我们更方便地控制选择框在容器中的排列和对齐,特别是在创建复杂表单布局时。例如,可以使用Flexbox轻松实现水平或垂直对齐的多选框组。 7. **无障碍性(Accessibility)**: ...
综上所述,"JS原生双栏穿梭选择框"的实现涉及到HTML5的结构布局、CSS的样式控制,以及JavaScript的事件监听和逻辑处理。通过合理地组合这些技术,我们可以创建出功能完备、交互友好的双栏穿梭选择框。在实际开发中,...