option如何增加删除,修改功能后重新存储于本地,添加的代码如下(语言-javascript)


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    text:<input type="text" id="text">
    value:<input type="text" id="value">
    <button id="addopt">增加选项</button>
    <select name="add" id="add">
 
    </select>
</body>
<script>
 
    let opt = [
        {
            value: "1",
            text: "1"
        }
    ];
 
    let list = JSON.parse(localStorage.getItem("list"));
    if (list && list.length > 0) {
        V(list)
    } else {
        V(opt);
    }
    function V(list) {
        localStorage.setItem("list", JSON.stringify(list));
        // setTimeout(() => {
            list1 = JSON.parse(localStorage.getItem("list"));
            let sel = document.getElementById("add");
            let strhtml = "";
            for (var i = 0; i < list1.length; i++) {
                strhtml += `<option value="${list1[i].value}">${list1[i].text}</option>`;
            }
            sel.innerHTML = strhtml;
        // }, 100)
 
    }
 
    let addbtn = document.getElementById("addopt");
    addbtn.onclick = function () {
        let val = document.getElementById("value").value;
        let txt = document.getElementById("text").value;
 
        let list = JSON.parse(localStorage.getItem("list"));
 
        list.push({
            value: val,
            text: txt
        });
        V(list);
    }
 
 
 
</script>
 
</html> 
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    text:<input type="text" id="text">
    value:<input type="text" id="value">
    <button id="addopt">增加选项</button>
    <select name="add" id="add">
 
    </select>
</body>
<script>
 
    let opt = [
        {
            value: "1",
            text: "1"
        }
    ];
 
    let list = JSON.parse(localStorage.getItem("list"));
    if (list && list.length > 0) {
        V(list)
    } else {
        V(opt);
    }
    function V(list) {
        localStorage.setItem("list", JSON.stringify(list));
        // setTimeout(() => {
            list1 = JSON.parse(localStorage.getItem("list"));
            let sel = document.getElementById("add");
            let strhtml = "";
            for (var i = 0; i < list1.length; i++) {
                strhtml += `<option value="${list1[i].value}">${list1[i].text}</option>`;
            }
            sel.innerHTML = strhtml;
        // }, 100)
 
    }
 
    let addbtn = document.getElementById("addopt");
    addbtn.onclick = function () {
        let val = document.getElementById("value").value;
        let txt = document.getElementById("text").value;
 
        let list = JSON.parse(localStorage.getItem("list"));
 
        list.push({
            value: val,
            text: txt
        });
        V(list);
    }
 
 
 
</script>
 
</html>

代码不全,在这里点击插入代码,把完整的代码贴出来

img

img