javascript列表框操作函数集合汇总

2023年5月27日下午1:09 • JavaScript

我们来详细讲解一下 "javascript列表框操作函数集合汇总" 的完整攻略。

简介

"javascript列表框操作函数集合汇总" 提供了一系列的javascript函数，可以用来操作列表框的各种功能。其中包括添加、删除、排序、移动、选中等。下面是具体的函数操作说明。

操作说明

1. 添加项（addItem）

这个函数用来向指定的列表框中添加一项。函数代码如下：

function addItem(selObj, itemText, itemValue) {
   var option = document.createElement("option");
   option.text = itemText;
   option.value = itemValue;
   selObj.add(option, null);
}

使用方法：

<select id="mySelect">
  <option value="1">第一项</option>
  <option value="2">第二项</option>
</select>

<script>
var selObj = document.getElementById("mySelect");
addItem(selObj, "第三项", "3");
</script>

在这个例子中，我们首先定义了一个列表框，id为"mySelect"，然后通过JavaScript代码将一个值为"第三项"，实际值为"3"的项添加到了列表框中。

2. 删除项（removeItem）

这个函数用来删除指定的列表框中的一项。函数代码如下：

function removeItem(selObj, index) {
   selObj.remove(index);
}

使用方法：

<select id="mySelect">
  <option value="1">第一项</option>
  <option value="2">第二项</option>
  <option value="3">第三项</option>
</select>

<script>
var selObj = document.getElementById("mySelect");
removeItem(selObj, 2);
</script>

在这个例子中，我们首先定义了一个列表框，id为"mySelect"，然后通过JavaScript代码删除了索引为2的项，也就是"第三项"。

3. 排序（sortSelect）

这个函数用来对指定的列表框进行排序。函数代码如下：

function sortSelect(selObj) {
   var tmpAry = new Array();
   for (var i=0;i<selObj.options.length;i++) {
      tmpAry[i] = new Array();
      tmpAry[i][0] = selObj.options[i].text;
      tmpAry[i][1] = selObj.options[i].value;
   }
   tmpAry.sort();
   while (selObj.options.length > 0) {
      selObj.options[0] = null;
   }
   for (var i=0;i<tmpAry.length;i++) {
      var op = new Option(tmpAry[i][0], tmpAry[i][1]);
      selObj.options[i] = op;
   }
   return;
}

使用方法：

<select id="mySelect">
  <option value="2">第二项</option>
  <option value="1">第一项</option>
  <option value="3">第三项</option>
</select>

<script>
var selObj = document.getElementById("mySelect");
sortSelect(selObj);
</script>

在这个例子中，我们首先定义了一个列表框，id为"mySelect"，然后通过JavaScript代码将这个列表框进行了排序。

4. 移动（moveSelect）

这个函数用来将一个或多个项从一个列表框中移动到另一个列表框中。函数代码如下：

function moveSelect(sourceSelect, targetSelect) {
   for (var i=0;i<sourceSelect.options.length;i++) {
      if (sourceSelect.options[i].selected) {
         var option = sourceSelect.options[i];
         var newOption = document.createElement("option");
         newOption.value = option.value;
         newOption.text = option.text;
         targetSelect.add(newOption, null);
         sourceSelect.remove(i);
         i--;
      }
   }
   return;
}

使用方法：

<select id="mySelect">
  <option value="1">第一项</option>
  <option value="2">第二项</option>
  <option value="3">第三项</option>
  <option value="4">第四项</option>
  <option value="5">第五项</option>
</select>

<select id="myTargetSelect"></select>

<button onclick="moveSelect(document.getElementById('mySelect'), document.getElementById('myTargetSelect'));">移动</button>

在这个例子中，我们首先定义了两个列表框，id分别为"mySelect"和"myTargetSelect"，然后通过JavaScript代码将"mySelect"列表框中被选中的项移动到了"myTargetSelect"列表框中。