效果展示
源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置下拉列表框的列表项</title>
</head>
<body>
<div>
<select name="comboBox" id="comboBox">
<option value="请选择">请选择</option>
</select>
</div>
<button type="button" onclick="testAddListItems()">设置下拉列表框</button>
<button type="button" onclick="testAddComboBox()">添加下拉列表项</button>
<button type="button" onclick="testClearListItems()">清空下拉列表框</button>
<button type="button" onclick="testGetListItem()">获取选中值</button>
<button type="button" onclick="testGetSelectedText()">获取所选中项的text</button>
<button type="button" onclick="testGetSelectedIndex()">获取所选中项的索引</button>
<button type="button" onclick="testGetListItemTexts();">获取所有列表项文本</button>
<button type="button" onclick="testGetListItemValues()">获取所有列表项值</button>
<button type="button" onclick="testRemoveById()">删除通过索引</button>
<button type="button" onclick="testRemoveByValue()">删除通过值</button>
<button type="button" onclick="testRemoveByText()">删除通过文本</button>
<button type="button" onclick="testListItemsCount()">计算列表框中选项数量</button>
<button type="button" onclick="testSetSelectedItemByIndex()">设置默认选项通过索引</button>
<button type="button" onclick="testSetSelectedItemByValue()">设置默认选项通过值</button>
<button type="button" onclick="testSetSelectedItemByText()">设置默认选项通过文本</button>
<button type="button" onclick="testIsExistItemByValue()">通过值判断是否存在</button>
<button type="button" onclick="testIsExistItemByText()">通过文本判断是否存在</button>
<button type="button" onclick="testReplaceTextByIndex()">替换选项text通过索引</button>
<button type="button" onclick="testReplaceValueByIndex()">替换选项value通过索引</button>
<button type="button" onclick="testReplaceValueByValue()">替换value通过value</button>
<button type="button" onclick="testReplaceValueByText()">替换value通过text</button>
<button type="button" onclick="testReplaceTextByText()">替换text通过text</button>
<script type="text/javascript">
function testAddListItems() {
var array = ["唐僧", "孙悟空", "猪八戒", "沙悟净"];
setComboBox("comboBox", array);
}
function testAddComboBox() {
addComboBox("comboBox", "牛魔王");
}
function testClearListItems() {
clearComboBox("comboBox");
}
function testGetListItem() {
alert(getSelectedValue("comboBox"));
}
function testGetSelectedText() {
alert(getSelectedText("comboBox"))
}
function testGetSelectedIndex() {
alert("索引：" + getSelectedIndex("comboBox"));
}
function testGetListItemTexts() {
alert(getAllTexts("comboBox"));
}
function testGetListItemValues() {
alert(getAllValues("comboBox"));
}
function testRemoveById() {
removeByIndex("comboBox", 1);
}
function testRemoveByValue() {
removeByValue("comboBox", "猪八戒");
}
function testRemoveByText() {
removeByText("comboBox", "孙悟空");
}
function testListItemsCount() {
alert(listItemsCount("comboBox"));
}
function testSetSelectedItemByIndex() {
setSelectedItemByIndex("comboBox", 2);
}
function testSetSelectedItemByValue() {
setSelectedItemByValue("comboBox", "沙悟净");
}
function testSetSelectedItemByText() {
setSelectedItemByText("comboBox", "沙悟净");
}
function testIsExistItemByValue() {
console.log("是否存在：" + isExistItemByValue("comboBox", "沙悟净"));
}
function testIsExistItemByText() {
console.log("是否存在：" + isExistItemByText("comboBox", "孙悟空"));
}
function testReplaceTextByIndex() {
replaceTextByIndex("comboBox", 2, "如来佛祖");
}
function testReplaceValueByIndex() {
replaceValueByIndex("comboBox", 3, "观音菩萨");
}
function testReplaceValueByValue() {
replaceValueByValue("comboBox", "请选择", "请选择...");
}
function testReplaceValueByText() {
replaceValueByText("comboBox", "孙悟空", "swk");
}
function testReplaceTextByText() {
replaceTextByText("comboBox", "孙悟空", "齐天大圣");
}
/**
* 设置下拉列表框的值
* @param selectId 下拉列表框的id
* @param options 下拉列表项数组
*/
function setComboBox(selectId, options) {
// 获取下拉列表框的元素
var selectId = document.getElementById(selectId);
for (var i = 0; i < options.length; i++) {
// 创建一个option元素节点
var option = document.createElement("option");
// 为option元素节点创建一个文本节点
var text = document.createTextNode(options[i]);
// 将文本节点添加到option元素节点中
option.appendChild(text);
// 再将option节点添加到下拉列表框的元素节点中
selectId.appendChild(option);
}
}
/**
* 添加下拉列表框选项
* @param selectId 下拉列表框的id
* @param option 下拉列表项
*/
function addComboBox(selectId, option) {
// 获取下拉列表框的元素
var selectId = document.getElementById(selectId);
// 创建一个option元素节点
var optionNode = document.createElement("option");
// 为optionNode元素节点创建一个文本节点
var textNode = document.createTextNode(option);
// 将文本节点添加到optionNode元素节点中
optionNode.appendChild(textNode);
// 再将optionNode节点添加到下拉列表框的元素节点中
selectId.appendChild(optionNode);
}
/**
* 清空下拉列表框
* @param selectId 下拉列表框的id
*/
function clearComboBox(selectId) {
// 获取下拉列表框的元素
var selectId = document.getElementById(selectId);
while (tagNames.length > 0) {
// 删除第一个子节点
selectId.remove(selectId.childNodes[0]);
}
}
/**
* 获取下拉列表框所选中的值
* @param selectId 下拉列表框的id
* @returns {string} 返回所选中的值
*/
function getSelectedValue(selectId) {
// 获取下拉列表框的元素
var v = document.getElementById(selectId);
// 返回选中的列表框的值
return v.options[v.selectedIndex].value;
}
/**
* 获取下拉列表框所选中的文本
* @param selectId 下拉列表框的id
* @returns {string} 返回所选中的文本
*/
function getSelectedText(selectId) {
// 获取下拉列表框的元素
var v = document.getElementById(selectId);
// 返回选中的列表框的文本
return v.options[v.selectedIndex].text;
}
/**
* 获取下拉列表框所选中的索引
* @param selectId 下拉列表框的id
* @returns {number} 返回选中的索引
*/
function getSelectedIndex(selectId) {
// 获取下拉列表框的元素
var v = document.getElementById(selectId);
// 返回所选中的列表项的索引
return v.selectedIndex;
}
/**
* 获取下拉列表框所有选项的文本
* @param selectId 下拉列表框的id
* @returns {any[]} 返回所有选项文本数组
*/
function getAllTexts(selectId) {
// 获取下拉列表框的元素
var v = document.getElementById(selectId);
// 实例化一个数组
var texts = new Array();
// 循环遍历下拉列表框中的所有值
for (var i = 0; i < v.options.length; i++) {
// 将值赋给数组
texts[i] = v.options[i].text;
}
// 返回下拉列表框的所有值数组
return texts;
}
/**
* 获取下拉列表框所有选项的值
* @param selectId 下拉列表框的id
* @returns {any[]} 返回所有选项值数组
*/
function getAllValues(selectId) {
// 获取下拉列表框的元素
var v = document.getElementById(selectId);
// 实例化一个数组
var values = new Array();
// 循环遍历下拉列表框中的所有值
for (var i = 0; i < v.options.length; i++) {
// 将值赋给数组
values[i] = v.options[i].value;
}
// 返回下拉列表框的所有值数组
return values;
}
/**
* 根据索引删除下拉列表框中的选项
* @param selectId 下拉列表框的id
* @param index 下拉列表框中的选项的索引
*/
function removeByIndex(selectId, index) {
// 获取下拉列表框的元素
var v = document.getElementById(selectId);
// 根据索引删除下拉列表框中的选项
v.removeChild(v.options[index]);
}
/**
* 根据值删除下拉列表框中的选项
* @param selectId 下拉列表框的id
* @param value 下拉列表框中的选项的值
*/
function removeByValue(selectId, value) {
// 获取下拉列表框的元素
var v = document.getElementById(selectId);
// 循环遍历下拉列表框项
for (var i = 0; i < v.options.length; i++) {
// 判断输入值与下拉列表框项的值释放相等
if (v.options[i].value == value) {
// 如果相等则删除该项
v.options.remove(i);
}
}
}
/**
* 根据文本删除下拉列表框中的选项
* @param selectId 下拉列表框的id
* @param text 下拉列表框中的选项的文本
*/
function removeByText(selectId, text) {
// 获取下拉列表框的元素
var v = document.getElementById(selectId);
// 循环遍历下拉列表框项
for (var i = 0; i < v.options.length; i++) {
// 判断输入文本与下拉列表框项的文本释放相等
if (v.options[i].text == text) {
// 如果相等则删除该项
v.options.remove(i);
}
}
}
/**
* 获取下拉列表框中选项数量
* @param selectId 下拉列表框的id
* @returns {number} 返回下拉列表框中选项数量
*/
function listItemsCount(selectId) {
// 获取下拉列表框的元素
var v = document.getElementById(selectId);
// 返回列表框中选项的数量
return v.options.length;
}
/**
* 通过索引设置默认选项
* @param selectId 下拉列表框的id
* @param index 默认选项索引
*/
function setSelectedItemByIndex(selectId, index) {
// 获取下拉列表框的元素
var v = document.getElementById(selectId);
// 循环遍历下拉列表框项
for (var i = 0; i < v.options.length; i++) {
if (i == index) {
v.options[i].selected = true;
}
}
}
/**
* 通过值设置默认选项
* @param selectId 下拉列表框的id
* @param value 默认选项值
*/
function setSelectedItemByValue(selectId, value) {
// 获取下拉列表框的元素
var v = document.getElementById(selectId);
// 循环遍历下拉列表框项
for (var i = 0; i < v.options.length; i++) {
if (v.options[i].value == value) {
v.options[i].selected = true;
}
}
}
/**
* 通过文本设置默认选项
* @param selectId 下拉列表框的id
* @param text 默认文本
*/
function setSelectedItemByText(selectId, text) {
// 获取下拉列表框的元素
var v = document.getElementById(selectId);
// 循环遍历下拉列表框项
for (var i = 0; i < v.options.length; i++) {
if (v.options[i].text == text) {
v.options[i].selected = true;
}
}
}
/**
* 通过值判断选项是否存在下拉列表框中
* @param selectId 下拉列表框的id
* @param value 值
* @returns {boolean} 如果存在则返回true，否则返回false
*/
function isExistItemByValue(selectId, value) {
// 获取下拉列表框的元素
var v = document.getElementById(selectId);
// 循环遍历下拉列表框项
for (var i = 0; i < v.options.length; i++) {
if (v.options[i].value == value) {
return true;
}
}
return false;
}
/**
* 通过文本判断选项是否存在下拉列表框中
* @param selectId 下拉列表框的id
* @param text 文本
* @returns {boolean} 如果存在则返回true，否则返回false
*/
function isExistItemByText(selectId, text) {
// 获取下拉列表框的元素
var v = document.getElementById(selectId);
// 循环遍历下拉列表框项
for (var i = 0; i < v.options.length; i++) {
if (v.options[i].text == text) {
return true;
}
}
return false;
}
/**
* 通过索引替换下拉列表框中的选项text
* @param selectId 下拉列表框的id
* @param index 下拉列表框选项索引
* @param newText 修改后的新text
*/
function replaceTextByIndex(selectId, index, newText) {
// 获取下拉列表框的元素
var v = document.getElementById(selectId);
// 循环遍历下拉列表框项
for (var i = 0; i < v.options.length; i++) {
if (i == index) {
v.options[i].text = newText;
}
}
}
/**
* 通过索引替换拉列表框中的选项value
* @param selectId 下拉列表框的id
* @param index 下拉列表框选项索引
* @param newValue 修改后的新value
*/
function replaceValueByIndex(selectId, index, newValue) {
// 获取下拉列表框的元素
var v = document.getElementById(selectId);
// 循环遍历下拉列表框项
for (var i = 0; i < v.options.length; i++) {
if (i == index) {
v.options[i].value = newValue;
}
}
}
/**
* 通过value来替换下拉列表框中的value
* @param selectId 下拉列表框的id
* @param oldValue 原来的value
* @param newValue 修改后的新value
*/
function replaceValueByValue(selectId, oldValue, newValue) {
// 获取下拉列表框的元素
var v = document.getElementById(selectId);
// 循环遍历下拉列表框项
for (var i = 0; i < v.options.length; i++) {
if (v.options[i].value == oldValue) {
v.options[i].value = newValue;
}
}
}
/**
* 通过text替换value
* @param selectId 下拉列表框的id
* @param oldText 原来的text
* @param newValue 修改后的新value
*/
function replaceValueByText(selectId, oldText, newValue) {
// 获取下拉列表框的元素
var v = document.getElementById(selectId);
// 循环遍历下拉列表框项
for (var i = 0; i < v.options.length; i++) {
if (v.options[i].text == oldText) {
v.options[i].value = newValue;
}
}
}
/**
* 通过text替换原来的text
* @param selectId 下拉列表框的id
* @param oldText 原来的text
* @param newText 修改后的新text
*/
function replaceTextByText(selectId, oldText, newText) {
// 获取下拉列表框的元素
var v = document.getElementById(selectId);
// 循环遍历下拉列表框项
for (var i = 0; i < v.options.length; i++) {
if (v.options[i].text == oldText) {
v.options[i].text = newText;
}
}
}
</script>
</body>
</html>
