虽然使用EXT开发了一段时间，但是自己觉得我对javascript还是不是很熟，所以边看书边做小例子 给自己以后用到的时候查看下，都是很基本的东西，对初学者可能有点帮助
下面是代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>grid</title>
</head>
<body>
<input type="button" value="getSelect" onclick = "getSelect()"/>
<input type="button" value="selectbtn" onclick = "getSelAge()"/>
<div>
<select name="selectAge" id="selectAge">
<option value="1">18-21</option>
<option value="2">22-25</option>
<option value="3">26-29</option>
<option value="4">30-35</option>
<option value="5">Over35</option>
</select>
</div>
<p>
<input type="button" value="moreSelect" onclick = "moreSelect()"/>
<div>
<div>多选 需要增加 multiple属性<br>
在多选中size属性 可以初始化下拉框默认显示几个选项
</div>
<div>
<select name="moreselAge" id="moreselAge" multiple="multiple">
<option value="1">18-21</option>
<option value="2">22-25</option>
<option value="3">26-29</option>
<option value="4">30-35</option>
<option value="5">Over35</option>
<option value="6">Over40</option>
<option value="7">Over50</option>
</select>
</div>
</div>
<p></p>
<input type="button" value="addNewbtn" onclick = "addNewSelections()"/>
<input type="button" value="deletebtn" onclick = "deleteselections()"/>
<input type="button" value="deleAllbtn" onclick = "deleteAllSelections()"/>
<div>selectName :<input type="text" id="txtName"/></div>
<div>selectValue:<input type="text" id="txtValue"/></div>
<div>
<select name="moreselAge" id="addNew">
<option value="1" selected>18-21</option>
<option value="2">22-25</option>
<option value="3">26-29</option>
<option value="4">30-35</option>
<option value="5">Over35</option>
<option value="6">Over40</option>
<option value="7">Over50</option>
</select>
</div>
<p>移动选项</p>
<p>
<table>
<tr collspan="2">
<td>
<div>
<select name="moreselAge" id="move1" multiple="multiple" size="7">
<option value="1">18-21sfiods</option>
<option value="2">22-25sjdfd</option>
<option value="3">26-29xxs</option>
<option value="4">30-35vs</option>
<option value="5">Over35dcff</option>
<option value="6">Over40shhfsd</option>
<option value="7">Over50sdefs</option>
<option value="8">Over88www</option>
</select>
</div>
</td>
<td width="100" align="center">
<input type="button" value=">" onclick = "rightSingle()" /><br>
<input type="button" value=">>" onclick = "rightAll()"/><br>
<input type="button" value="<" onclick = "leftSingle()"/><br>
<input type="button" value="<<" onclick = "leftAll()"/>
</td>
<td>
<div>
<select name="moreselAge" id="move2" multiple="multiple" size="7">
<option value="1">18-21</option>
<option value="2">22-25</option>
<option value="3">26-29</option>
<option value="4">30-35</option>
<option value="5">Over35</option>
<option value="6">Over40</option>
<option value="7">Over50</option>
<option value="8">Over88</option>
</select>
</div>
</td>
<tr>
</table>
</body>
<script type="text/javascript">
//获得下拉列表对象
oListbox = document.getElementById("selectAge");
var ListUtil = new Object();
var selectbtn = document.getElementById("selectbtn");
function getSelAge (){
//访问选项
alert(oListbox.options[1].firstChild.nodeValue); //显示的内容
alert(oListbox.options[1].getAttribute("value"));//对应的value
alert("获得它在集合中的位置== " + oListbox.options[2].index); //获得它在集合中的位置
alert("获得集合的元素个数长度== " + oListbox.options.length); //获得集合的元素个数长度
}
/*************************************************************************************************/
//获得选中选项
function getSelect(){
var indx = oListbox.selectedIndex;
alert("获得选中的选项的索引 "+ indx );
}
//多选下拉框
var moreselAgeList = document.getElementById("moreselAge");
/*******************************************************************/
//入参 下拉框对象
ListUtil.getSelectIndexes = function (oListbox){
var arrIndexes = new Array();
for(var i=0 ; i<oListbox.options.length;i++){
//如果该项被选中则把该项对应的索引添加到数组中
if(oListbox.options[i].selected){
arrIndexes.push(i);
}
}
return arrIndexes; //返回选中的选项索引
}
/***************************************************************/
// 多选
function moreSelect(){
var arrIndexes = ListUtil.getSelectIndexes(moreselAgeList);
alert("选中的数组length = "+ arrIndexes.length + " 选中的选项索引为 ："+ arrIndexes);
}
/************************添加新选项***************************************************************/
//
var addNewLisbox = document.getElementById("addNew"); //获得下拉框对象
var otxtName = document.getElementById("txtName"); //name 文本框
var otxtValue = document.getElementById("txtValue"); //value 文本框
//添加方法
ListUtil.addOptions = function(oListbox,sName,sValue){
var arryV = new Array();
//标记输入的值是否可以添加
var isAdd = false;
//判断是否有重复的值
for(var i =0 ;i<oListbox.options.length;i++){
var sv = oListbox.options[i].getAttribute("value");
if(sv == sValue){
alert("不能添加重复的value");
return ;
}else{
isAdd = true;
}
}
if(isAdd || oListbox.options.length == 0){
//下面使用dom方法创建节点
var oOption = document.createElement("option");// 创建option元素
oOption.appendChild(document.createTextNode(sName));
//因为选项的值不是必须的，所以如果传入了值 则添加进来
if(arguments.length == 3){
oOption.setAttribute("value",sValue);
}
oListbox.appendChild(oOption); //把选项添加进列表框
alert("添加成功!!");
} // end if(isAdd)
}
//添加按钮的点击事件方法
function addNewSelections(){
var txtname = otxtName.value;
var txtvalue = otxtValue.value;
if(txtname != "" && txtvalue != ""){
ListUtil.addOptions(addNewLisbox,txtname,txtvalue);//添加新项
otxtName.value = "";
otxtValue.value = "";
}else{
alert("请输入要添加的值和name");
return;
}
}
/*******************删除选中选项****************************************************************/
//传入下拉框对象和(索引)
ListUtil.deleteOptons = function(oListbox){
var selIndex = oListbox.selectedIndex;
if(oListbox.options.length == 0){
alert("列表中无元素可删除");
return ;
}
oListbox.remove(selIndex); //删除选中的选项
}
//删除按钮点击事件
function deleteselections(){
ListUtil.deleteOptons(addNewLisbox);
}
/**********删除所有***********************************************************************/
ListUtil.deletsAllOptions = function(oListbox){
if(oListbox.options.length != 0){
for(var i= oListbox.options.length-1;i>=0;i--){ //倒着删除是因为
oListbox.remove(i);
}
}else{
alert("该列表为空!");
}
}
function deleteAllSelections(){
ListUtil.deletsAllOptions(addNewLisbox);
}
/*******移动选项***************************************************************************************/
//获得下拉框
var move1Listbox = document.getElementById("move1"); //左边下拉框
var move2Listbox = document.getElementById("move2"); //右边下拉框
//移动一个或多个选中的选项
ListUtil.move = function(oListboxFrom ,oListboxTo){
//var idx1 = oListboxFrom.selectedIndex;
var arrIndexes = ListUtil.getSelectIndexes(oListboxFrom);
var oOption ;
if(arrIndexes.length == 0 ){
alert("请选择至少一个选项!");
return ;
}else{
for(var i=oListboxFrom.options.length-1;i>=0;i--){
oOption = oListboxFrom.options[i];
if(oOption.selected && oOption != null ){
oListboxTo.appendChild(oOption);
}
}
}
}
//向右移 一个元素
function rightSingle(){
ListUtil.move(move1Listbox,move2Listbox);
};
//向左移 一个元素
function leftSingle(){
ListUtil.move(move2Listbox,move1Listbox);
}
ListUtil.moveAll = function(oListboxFrom,oListboxTo){
for(var i=oListboxFrom.options.length-1;i>=0;i--){
oOption = oListboxFrom.options[i];
//alert(oOption);
oListboxTo.appendChild(oOption);
}
}
//向右移所有选项
function rightAll(){
ListUtil.moveAll(move1Listbox,move2Listbox);
}
//向左移所有选项
function leftAll(){
ListUtil.moveAll(move2Listbox,move1Listbox);
}
</script>
</html>
附件可以看到效果
分享到：
相关推荐
美化下拉框涉及以下几个方面： 1. **布局**：通过CSS调整下拉框的大小、位置、边框和背景颜色，使其与页面其他元素保持一致。 2. **字体和颜色**：改变文本的字体、字号、颜色和行高，以提高可读性。 3. **箭头图标...
下拉框有几个关键的事件，如SelectedIndexChanged，可用于处理用户选择改变时的操作： 1. Windows Forms: ```csharp private void comboBox1_SelectedIndexChanged(object sender, EventArgs e) { string ...
Bootstrap的下拉框是由`<select>`元素和`<option>`元素组成的，但默认的HTML下拉框只支持单选。为了实现多选功能，我们需要引入一个名为`bootstrap-select`的插件。这个插件扩展了Bootstrap的下拉框，添加了多选、...
在HTML中，你可以使用`<select multiple class="easyui-combobox">`来创建一个多选下拉框。然后，通过JavaScript设置选项和配置，例如： ```javascript $(function(){ $('#combobox').combobox({ multiple: true, ...
在实际开发中，动态控制下拉框通常涉及到以下几个关键操作： 1. **清空所有选项** - 通过将下拉框对象的`options.length`属性设置为0，可以清空下拉框的所有选项。 2. **动态增加一个选项** - 创建新的`<option>...
在“AJAX二级下拉框联动”中，主要涉及以下几个关键知识点： 1. **AJAX基础**：AJAX 是一种创建动态网页的技术，通过在后台与服务器进行少量数据交换，使网页实现异步更新。它利用JavaScript创建XMLHttpRequest对象...
为了更好地理解如何实现下拉框的联动以及与按钮的交互，我们需要先明确几个关键步骤： 1. **初始化HTML结构**：创建两个或多个下拉列表及一个或多个按钮。 2. **添加事件监听器**：为第一个下拉列表添加`change`...
实现这种联动效果通常涉及以下几个步骤： 1. **初始化layui**：在HTML文件中引入layui的CSS和JS文件，并在JavaScript代码中调用layui的`layui.use`方法加载`form`模块，因为联动效果的实现依赖于`form`模块的事件...
根据提供的文件信息，我们可以深入探讨以下几个关键的知识点：HTML下拉框的基本结构、如何通过点击图标触发下拉框显示以及一些可能的优化建议。 ### HTML下拉框的基本结构 在HTML文档中创建一个下拉框（也称为选择...
为了创建这样一个控件，开发者需要考虑以下几个关键点： 1. **HTML结构**：控件的基础是HTML元素，可能包括一个`<select>`下拉框和一个`<input type="text">`文本框。它们需要通过CSS进行布局，使得在视觉上看起来...
自制的下拉框控件往往需要考虑以下几个关键特性： 1. **输入功能**：除了基本的选择功能外，这个控件还支持用户输入文本，这可能意味着控件内部包含一个输入框，允许用户快速输入他们想要的选项，而无需滚动长长的...
在网页设计和开发中，用户界面的美观性和易用性是至关重要的，特别是在表单元素的设计上，如单选按钮、多选框以及下拉选择框。...通过熟练掌握其使用方法，开发者可以快速构建出功能强大且美观的网页界面。
这个“jQuery多选和单选下拉框插件”是为了解决传统HTML下拉框（`<select>`元素）功能单一的问题，提供更丰富的用户交互体验。在网页设计中，下拉框常用于用户输入数据的选择，尤其是当选项数量较多时，能有效节省...
在IT领域，尤其是在前端开发中，"下拉框自动匹配文本框输入内容"是一个常见的功能需求，主要用于提高用户输入的效率和准确性。这个小例子旨在帮助新手理解如何实现这一功能。下拉框（Dropdown）与文本框（Input）的...
要使用JavaScript使这个下拉框变为只读，有几种方法。一种是通过设置其`disabled`属性。在JavaScript中，你可以这样做： ```javascript document.getElementById('mySelect').disabled = true; ``` 这行代码会找到...
总结起来，实现“BootStrap 下拉框多选”主要涉及以下几个步骤： 1. 在`<select>`标签上添加`multiple`属性，以启用多选功能。 2. 引入`bootstrap-multiselect`插件的CSS和JS文件。 3. 使用JQuery对`<select>`元素...
在实现这样的功能时，我们需要了解以下几个关键知识点： 1. **HTML基础**：首先，创建一个基础的HTML结构，包括一个`<input>`元素作为用户输入的地方，以及一个`<select>`元素来显示下拉选项。`<select>`可以有多个...
在实现多级联动下拉框的过程中，我们需要关注以下几点： 1. **事件监听**：使用`$(selector).on('click', function() {...})`监听用户的点击事件，这里的`selector`可能是触发下拉框显示的元素。 2. **DOM操作**：...
在"select下拉框可编辑输入框"的设计中，CSS起到了至关重要的作用，主要体现在以下几个方面： 1. **样式定制**：通过CSS，我们可以定制下拉框的外观，如边框、背景色、字体样式等，使其与网页的整体设计风格保持...