JS操作select

Posted 认认真真，知难而进。

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS操作select相关的知识，希望对你有一定的参考价值。

基本操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
    // 创建select
    function createSelect() {
        var mySelect = document.createElement("select");
        mySelect.id = ‘mySelect‘;
        document.body.appendChild(mySelect);
    }
    createSelect();

    // 添加option
    function addOption() {
        var objSelect = document.querySelector("#mySelect");
        objSelect.add(new Option("文本1", "值1"));// ie
        objSelect.options.add(new Option("文本2", "值2"));// 文本是展示出来的内容
    }
    addOption();

    // 删除所有option
    function removeAllOption() {
        var objSelect = document.querySelector("#mySelect");
        objSelect.options.length = 0;
    }
    // removeAllOption();

    // 删除当前的option
    function removeNow() {
        var objSelect = document.querySelector("#mySelect");
        var index = objSelect.selectedIndex;
        objSelect.options.remove(index);
    }
    removeNow();

    // 获取当前option的内容
    function getNow() {
        var objSelect = document.querySelector("#mySelect");
        var index = objSelect.selectedIndex;
        var nowVal = objSelect.options[index].value;// objSelect.options[index].text
        console.log(nowVal);// 值2
    }
    getNow();

    // 修改当前option
    function modifyOption() {
        var objSelect = document.querySelector("#mySelect");
        var index = objSelect.selectedIndex;
        objSelect.options[index]=new Option("新修改的","new");
    }
    modifyOption();

    // 删除select
    function removeSelect() {
        var objSelect = document.querySelector("#mySelect");
        objSelect.parentNode.removeChild(objSelect);
    }
    removeSelect();
    </script>
</body>
</html>

 

...

以上是关于JS操作select的主要内容，如果未能解决你的问题，请参考以下文章

谷歌浏览器调试jsp 引入代码片段，如何调试代码片段中的js

VSCode自定义代码片段——JS中的面向对象编程

VSCode自定义代码片段9——JS中的面向对象编程

XSS：如何从 C# 中的字符串中删除 JS 片段？

Html页面中select下拉列表框别样用法，一个方法一劳永逸。

js代码片段: utils/lcoalStorage/cookie