JavaScript的一些下拉列表框用法

程序员文章站 2022-05-31 13:27:14
...
效果展示

源码

<!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" οnclick="testAddListItems()">设置下拉列表框</button>
<button type="button" οnclick="testAddComboBox()">添加下拉列表项</button>
<button type="button" οnclick="testClearListItems()">清空下拉列表框</button>
<button type="button" οnclick="testGetListItem()">获取选中值</button>
<button type="button" οnclick="testGetSelectedText()">获取所选中项的text</button>
<button type="button" οnclick="testGetSelectedIndex()">获取所选中项的索引</button>
<button type="button" οnclick="testGetListItemTexts();">获取所有列表项文本</button>
<button type="button" οnclick="testGetListItemValues()">获取所有列表项值</button>
<button type="button" οnclick="testRemoveById()">删除通过索引</button>
<button type="button" οnclick="testRemoveByValue()">删除通过值</button>
<button type="button" οnclick="testRemoveByText()">删除通过文本</button>
<button type="button" οnclick="testListItemsCount()">计算列表框中选项数量</button>
<button type="button" οnclick="testSetSelectedItemByIndex()">设置默认选项通过索引</button>
<button type="button" οnclick="testSetSelectedItemByValue()">设置默认选项通过值</button>
<button type="button" οnclick="testSetSelectedItemByText()">设置默认选项通过文本</button>
<button type="button" οnclick="testIsExistItemByValue()">通过值判断是否存在</button>
<button type="button" οnclick="testIsExistItemByText()">通过文本判断是否存在</button>
<button type="button" οnclick="testReplaceTextByIndex()">替换选项text通过索引</button>
<button type="button" οnclick="testReplaceValueByIndex()">替换选项value通过索引</button>
<button type="button" οnclick="testReplaceValueByValue()">替换value通过value</button>
<button type="button" οnclick="testReplaceValueByText()">替换value通过text</button>
<button type="button" οnclick="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>
相关标签： JavaScript 下拉列表框
上一篇： RESTframework简介
下一篇： PS修图一人扮演两个或多个角色图文教程
JavaScript的一些下拉列表框用法

效果展示

源码

javascript基于原型链的继承及call和apply函数用法分析

Javascript中的async awai的用法

javascript数组与php数组的地址传递及值传递用法实例

javascript入门·动态的时钟,显示完整的一些方法,新年倒计时

Javascript下拉刷新的简单实现

JavaScript学习总结之正则的元字符和一些简单的应用

C#中一些字符串操作的常用用法

Javascript中apply、call、bind的用法讲解

javascript中一些奇葩的日期换算方法总结

javascript实现的树型下拉框改进版
