Steps to remove a chosen option from a dropdown list if the user decides not to proceed with the selection

Question

Steps to remove a chosen option from a dropdown list if the user decides not to proceed with the selection

I am currently working with this JavaScript code:

function change(selection){
    if(confirm("Select this option?"))
    {

    } else {
        if(selection=="1")
        {
            alert("Return selected to NO");
        } else {
            alert("Return selected to YES");
        }
    }

}

Here is the corresponding HTML code snippet:

<select id="sel" name="sel" onchange="change(this.value)">
    <option value="1">YES</option>
    <option value="0">NO</option>
</select>

My Desired Outcome:

Assume that by default, the selected option is YES. If the user chooses to select NO, confirmation boxes will appear asking if they want to switch to NO or not. If they click "OK", then the NO option will be selected. However, if they click "CANCEL", no selection will be made and the YES option stays selected. The same process applies vice versa.

To see a live example, check out this Fiddle: http://jsfiddle.net/CtxUy/

javascript dom

Answer 1

Answer №1

In case you are focused only on these specific elements, simply assign the values manually:

if(varam=="1")
{
    document.getElementById('sel').value = 0;
} else {
    document.getElementById('sel').value = 1;
}

If there could be additional values involved, one approach is to keep track of the initially selected value and revert the selector value to that when a confirmation is declined, or update that stored value if they confirm.

Example: http://jsfiddle.net/CtxUy/2/

Answer 2

In case you are focused only on these specific elements, simply assign the values manually:

if(varam=="1")
{
    document.getElementById('sel').value = 0;
} else {
    document.getElementById('sel').value = 1;
}

If there could be additional values involved, one approach is to keep track of the initially selected value and revert the selector value to that when a confirmation is declined, or update that stored value if they confirm.

Example: http://jsfiddle.net/CtxUy/2/

Answer 3

Answer №2

To determine which option is selected, you can loop through the options and choose the one with the selected attribute. If none have this attribute, simply select the first option by default.

var select = document.getElementById('sel');
var options = select.options;
options[0].selected = true; // Select the first option as a backup

for (var i = 0, l = options.length; i < l; i++) {
    if (options[i].hasAttribute('selected')) {
        options[i].selected = true;
        break;
    }
}

Check out the DEMO here!

For more info: HTMLSelectElement, HTMLOptionElement.

Answer 4

To determine which option is selected, you can loop through the options and choose the one with the selected attribute. If none have this attribute, simply select the first option by default.

var select = document.getElementById('sel');
var options = select.options;
options[0].selected = true; // Select the first option as a backup

for (var i = 0, l = options.length; i < l; i++) {
    if (options[i].hasAttribute('selected')) {
        options[i].selected = true;
        break;
    }
}

Check out the DEMO here!

For more info: HTMLSelectElement, HTMLOptionElement.

Steps to remove a chosen option from a dropdown list if the user decides not to proceed with the selection

Answer №1

Answer №2

Similar questions

How can I generate 200 divs that are identical but each displaying a unique file (page0.svg, page1.svg..., page200.svg)?

The callback in Jquery getJSON does not execute even when a valid JSON response is received

Using HTML code within a Bootstrap 5 tooltip is a great way

Acquire the <li> element when it is clicked using vanilla JavaScript

Utilizing the power of jQuery's `.clone` method to create a new window with fully

Creating prototypes for objects starting from an empty state

Angular allows for displaying objects within other objects using interpolation

Sort Angular JS ng-options based on an array

The canvas game's animation can only be activated one time

Encountering the error "Vue 2.0 encounters an undefined push during router.push

Constructing variable names in AngularJS while using ng-repeat

How far apart are two surfaces when they are rotated along the Y-axis

JavaScript application throwing error: "require is not defined"

Utilizing React with an alternative server-side language

What is the best way to validate email addresses in Vue.js using watchers?

vue mapGetters not fetching data synchronously

The function called Nuxt: n2 is not defined

How can I access the value of a textbox located in the footer row of a gridview control using JavaScript?

After a two-second period of inactivity, the buttons on the item should trigger an action

Utilize environment variables to access system information when constructing an Angular 2 application