`

可控制选择框

阅读更多

<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 特效 控制选择框个数 js 特效 html 特效 控制选择框个数

    控制选择框个数.rar

    控制选择框个数.rar控制选择框个数.rar控制选择框个数.rar控制选择框个数.rar控制选择框个数.rar控制选择框个数.rar控制选择框个数.rar控制选择框个数.rar控制选择框个数.rar控制选择框个数.rar控制选择框个数.rar

    易语言单选框和选择框练习

    - **用法**:易语言中,使用“创建复选框”命令创建选择框,通过“设置复选框状态”命令控制其选中与否。 - **事件处理**:选择框也有“单击”事件,当用户点击选择框时,可以执行相应的代码逻辑。 - **应用示例*...

    在jsp页面中的日期选择框

    在JSP(Java Server Pages)页面中,日期选择框是一个常用的用户界面元素,它允许用户以图形化的方式选择日期。这种交互方式对于处理与日期相关的数据输入非常方便,例如在预订系统、日程安排或者记录生日等场景。在...

    易语言源码单选框选择框选中状态.rar

    在程序中,可以通过读取或修改这个属性来控制选择框的状态,并可以响应其“改变”事件,根据用户的选择进行相应的操作。 3. **源码示例分析**:在“单选框选择框选中状态”的源码中,开发者可能展示了如何动态控制...

    Flash选择框效果

    在Flash中,选择框通常由两个主要部分组成:一个可点击的按钮和一个下拉菜单。当用户点击按钮时,下拉菜单会显示一系列选项供用户选择。这种效果可以通过ActionScript(Flash的编程语言)和图形设计功能来实现。 ...

    易语言源码易语言单选框和选择框练习源码.rar

    选择框的状态同样可以通过“设置部件状态”命令来控制,状态值为1表示选中,0表示未选中。选择框的“复选框被点击”事件可以用于实现用户交互逻辑。 3. 源码练习 这个压缩包中的源码提供了实际的代码示例,可以帮助...

    JS控制选择框全选取消全选

    本文将详细解析如何利用JS控制选择框(通常为复选框)的全选与取消全选功能,以及在此基础上实现批量操作。 ### 核心知识点:JS控制选择框全选/取消全选 #### 1. HTML结构定义 在HTML文档中,选择框(复选框)由`...

    仿QQ用户选择框

    【标题】"仿QQ用户选择框"涉及到的知识点主要集中在用户界面设计和编程技术上,尤其是模拟QQ应用程序的交互体验。QQ作为一款流行的即时通讯软件,其用户界面设计具有高度的用户友好性和辨识度,因此在开发中进行仿制...

    为下拉选择框加滚动条

    通过CSS,我们可以控制下拉选择框的样式,包括添加滚动条。例如,可以使用`overflow-y: auto;`来启用垂直滚动条,当内容超过选择框高度时自动显示。 2. **自定义滚动条样式**: 在一些现代浏览器中,可以通过CSS伪...

    自定义select选择框(很漂亮很强大,推荐)

    在网页设计中,选择框(Select)是一种常见的交互元素,用于让用户从预设的选项中进行选择。然而,原生的HTML `&lt;select&gt;` 元素样式单一,难以满足现代网页的美观需求。针对这一问题,开发者们通常会采用自定义 ...

    javascript经典特效---控制选择框个数.rar

    在控制选择框个数的场景中,我们需要获取到`&lt;select&gt;`元素,这可以通过`document.getElementById()`、`document.querySelector()`或`document.querySelectorAll()`等方法实现。获取元素后,可以使用`.innerHTML`、`....

    易语言单选框和选择框练习源码.rar

    5. **程序流程控制**:源码中可能会包含条件语句(如If...Then...Else...)、循环语句(如For...Next)等,用于根据单选框和选择框的状态执行不同的操作。 6. **用户输入验证**:在实际应用中,可能需要验证用户的...

    下拉选择框。效果见描述的地址

    在iOS开发中,下拉选择框(Dropdown)是一种常见的用户界面元素,用于提供多个选项让用户进行选择。在标题“下拉选择框”中,我们可以理解为这是一个关于如何在iOS应用中实现类似功能的教学或示例。描述中的链接提供...

    Android 自定义日期选择框

    在Android开发中,自定义日期选择框是一种常见的需求,它允许用户以更加直观和友好的方式选择日期。Android系统提供了一些内置的日期选择组件,如DatePicker,但有时这些组件可能无法满足开发者对于界面设计和用户...

    演员选择框三级联动(原生javascript和jquery实现)

    它指的是在一个选择框中,当用户选择某一选项时,下一个关联的选择框会根据前一个选择的结果动态更新其选项,这一过程可以延续到第三个甚至更多的选择框。这种设计能够帮助用户快速定位和筛选信息,提高操作效率。 ...

    6个Web前端纯CSS3实现的单多选选择框(四)

    CSS3的Flexbox和Grid布局系统可以帮助我们更方便地控制选择框在容器中的排列和对齐,特别是在创建复杂表单布局时。例如,可以使用Flexbox轻松实现水平或垂直对齐的多选框组。 7. **无障碍性(Accessibility)**: ...

    JS原生双栏穿梭选择框

    综上所述,"JS原生双栏穿梭选择框"的实现涉及到HTML5的结构布局、CSS的样式控制,以及JavaScript的事件监听和逻辑处理。通过合理地组合这些技术,我们可以创建出功能完备、交互友好的双栏穿梭选择框。在实际开发中,...

Global site tag (gtag.js) - Google Analytics