Question 300512 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How can I disable an option in a different select box based on the current option in JS?

I have two selectboxes that will each have the same values in both selectboxes. I’m trying to perform the following action:

If a user selects an option with the value of "red", disable the "red" option in the other selectbox, and enable it if a user selects a different color.

I’m able to get the disabled attribute to work, but I can’t figure out how to "un-disable" it after a user selects a different option.

const preventDuplicate = (e) => {
    if (!e.target == "select-one") return; // Bail if not a selectbox

    const selectOne = document.querySelector("#one");
    const selectTwo = document.querySelector("#two");

    const getValue = () => e.target.value;

    if (e.target == selectOne) {
        // Get the value
        const value = getValue();
        // Get the other selectbox value
        const otherValue = selectTwo.querySelector(`[value="${value}"]`);

        // Disable it
        if (otherValue) {
            otherValue.setAttribute("disabled", "disabled");
        } else {
            otherValue.removeAttribute("disabled");
        }
    } else {
        // Get the value
        const value = getValue();
        // Get the other selectbox value
        const otherValue = selectOne.querySelector(`[value="${value}"]`);

        // Disable it
        if (otherValue) {
            otherValue.setAttribute("disabled", "disabled");
        } else {
            otherValue.removeAttribute("disabled");
        }
    }
};
document.addEventListener("change", preventDuplicate);
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <div class="selectbox-container">
        <label for="one">Select One</label>
        <select name="" id="one">
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
            <option value="teal">Teal</option>
        </select>

        <label for="two">Select Two</label>
        <select name="" id="two">
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
            <option value="teal">Teal</option>
        </select>
    </div>
</body>

</html>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks for all the replies - I ended up going with @mykaf suggestion and wrote the following, which worked well:

    const getValue = () => e.target.value;
                const disable = (selectbox, value) => {
                    // Enable all options first
                    const disabledOptions = selectbox.querySelectorAll("option[disabled]");
                    disabledOptions.forEach((option) => {
                        option.removeAttribute("disabled");
                    });

                    // Disable the one you need
                    const optionToDisable = selectbox.querySelector(`option[value="${value}"]`);
                    optionToDisable.setAttribute("disabled", "disabled");
                };

                if (e.target == selectOne) {
                    // Get the value
                    const value = getValue();
                    // Get the other selectbox value
                    disable(selectTwo, value);
                } else {
                    const value = getValue();
                    disable(selectOne, value);
                }

  2. 0

    With your permission, I changed your code and wrote only for selectBoxOne as you said
    I think this code is a bit cleaner

    Also the same code is repeated for selectBoxTwo

    I hope it has been used

    const selectBoxOne = document.querySelector('#one')
const selectBoxTwo = document.querySelector('#two')

selectBoxOne.addEventListener('change', (e) => {
            for (const item of selectBoxTwo.children) {
                item.disabled = false;
                if(e.target.value.toLowerCase() === item.innerHTML.toLowerCase()) {
                    item.disabled = true;
                }
            }
        })

selectBoxTwo.addEventListener('change', (e) => {
            for (const item of selectBoxOne.children) {
                item.disabled = false;
                if(e.target.value.toLowerCase() === item.innerHTML.toLowerCase()) {
                    item.disabled = true;
                }
            }
        })
    <div class="selectbox-container">
        <label for="one">Select One</label>
        <select name="" id="one">
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
            <option value="teal">Teal</option>
        </select>

        <label for="two">Select Two</label>
        <select name="" id="two">
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
            <option value="teal">Teal</option>
        </select>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search