CODEWITHSUNDEEP
javascripthtmlmulti-select
SILVANUS MARIE
SILVANUS MARIE

Reputation: 13

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

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

I need to display the values on the same page by clicking on the value but not by clicking the submit button. My code works with the submit button, but I should not use it to display the values.

Upvotes: 1

Views: 748

Answers (1)

costaparas
costaparas

Reputation: 5237

You can remove the button and add an event listener on the select field, listening on the change event.

Whenever, the selection is changed, just call your existing function as is to set the result in the div.

In this first version, if multiple options are selected, then the order of the options follows the order of the options in the 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>

In this second version, the order of the options shown depends on the order in which they were selected. This is achieved by maintaining an array of selected options -- pushing new selected options onto the array, and removing any deselected options.

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

Upvotes: 1

Related Questions