在多选框中选择的值应显示在同一页面中，而无需单击提交按钮

Question

<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get Selected Values</title>
<script>
    function listboxresult() {
    var spanresult = document.getElementById("result1");
    spanresult.value = "";
    var x = document.getElementById("sel");
    for (var i = 0; i < x.options.length; i++) {
        if (x.options[i].selected == true) {
            spanresult.value += x.options[i].value + " ";
            document.getElementById("result1").innerHTML = spanresult.value;
            
        }
    }   
}
</script>
</head>
<body>
    <h2>Select fav color</h2>
    <select name="sel" id="sel" multiple="multiple">
        <option value="" disabled selected>Select your option</option> 
        <option value="Black">Black</option>
        <option value="Red">Red</option>
        <option value="White">White</option>
        <option value="Blue">Blue</option>
        <option value="Green">Green</option>               
    </select>
    <div id="result"></div>
    <br>
    <div> 
    <input type="button" id="but1" value="Click" onclick="listboxresult();">
    </div>
    <br>
    <div id="result1"></div>
</body>
</html>

我需要通过单击值而不是单击提交按钮在同一页面上显示这些值。我的代码适用于提交按钮，但我不应该使用它来显示值。

Answer 1

您可以删除按钮并在 select 字段上添加一个 event listener，监听 change 事件。

每当更改选择时，只需按原样调用现有函数以在 div 中设置结果。

在第一个版本中，如果选择了多个选项，则选项的顺序将按照select中选项的顺序排列。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Selected Values</title>
</head>
<body>
    <h2>Select fav color</h2>
    <select name="sel" id="sel" multiple="multiple">
        <option value="" disabled selected>Select your option</option> 
        <option value="Black">Black</option>
        <option value="Red">Red</option>
        <option value="White">White</option>
        <option value="Blue">Blue</option>
        <option value="Green">Green</option>               
    </select>
    <div id="result"></div>
    <br>
    <br>
    <div id="result1"></div>
    <script type="text/javascript">
        document.getElementById("sel").addEventListener("change", () => {
            /* Your function verbatim */
            const spanresult = document.getElementById("result1");
            spanresult.value = "";
            const x = document.getElementById("sel");
            for (let i = 0; i < x.options.length; i++) {
                if (x.options[i].selected == true) {
                    spanresult.value += x.options[i].value + " ";
                    document.getElementById("result1").innerHTML = spanresult.value;
                }
            }
        });
    </script>
</body>
</html>

在第二个版本中，选项的显示顺序取决于它们被选中的顺序。这是通过维护选定选项的数组来实现的——将新的选定选项推送到数组中，并删除所有取消选定的选项。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Selected Values</title>
</head>
<body>
    <h2>Select fav color</h2>
    <select name="sel" id="sel" multiple="multiple">
        <option value="" disabled selected>Select your option</option> 
        <option value="Black">Black</option>
        <option value="Red">Red</option>
        <option value="White">White</option>
        <option value="Blue">Blue</option>
        <option value="Green">Green</option>               
    </select>
    <div id="result"></div>
    <br>
    <br>
    <div id="result1"></div>
    <script type="text/javascript">

        /* Maintain an array of selected options */
        let selected = [];

        const select = document.getElementById("sel");
        document.getElementById("sel").addEventListener("change", () => {
            for (const option of select.options) {
                if (option.selected === true) {
                    /* For each selected option... */
                    if (!selected.includes(option.value)) {
                        /* Only add it to the array of selected values once */
                        selected.push(option.value)
                    }
                } else {
                    /* Otherwise, remove it from the array of selected options */
                    selected = selected.filter(e => e !== option.value);
                }
            }
            /* Write the selected options once they are all known */
            document.getElementById("result1").innerHTML = selected.join(" ");
        });

    </script>
</body>
</html>

在多选框中选择的值应显示在同一页面中，而无需单击提交按钮

The values selected in multiselect box should be displayed in the same page without clicking submit button

html

javascript

multi-select