欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JavaScript的一些下拉列表框用法

程序员文章站 2022-05-31 13:27:14
...

效果展示

JavaScript的一些下拉列表框用法

源码

<!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>