How can I change select options with javascript?

Question

I have a select with options I need when I select an option another two disappear in the same select

<select class="select cf-select" name="customfield_10303" id="customfield_10303">
                <option value="">None</option>
                                <option value="10200">Opened</option>
                            <option value="10201">Closed</option>
                            <option value="10202">Escalated</option>
                            <option value="10203">Handled</option>
                            <option value="10204">Deferred</option>
                            <option value="10205">Reopened</option>
                            <option value="10206">Could Not Be Resolved</option>
        </select>

this is the HTML code I need javascript code when I select opened Just Escalated and Deferred are only appear

Answer 1

How exactly you need them to disappear ? Here i just delete them from the DOM.

 const selector = document.querySelector("select"); selector.addEventListener("click", addActivityItem); function addActivityItem(event) { let options = selector.querySelectorAll("option"); for (let i = 0; i < options.length; i++) { if (options[i].value !== event.target.value) options[i].remove() } }

 <select> <option>One</option> <option>Two</option> </select>