Question

180

How to change options of a select using JavaScript

rated 0 times [ 182] [ 2] / answers: 1 / hits: 25513 / 11 Years ago, wed, july 31, 2013, 12:00:00

I have an HTML page in which I have 2 selects.

<select id=field name=field onchange=checkValidOption();>

    <option />

    <option value=Plugin ID>Plugin ID</option>

    <option value=Name>Name</option>

</select>

<select id=operator name=operator onchange=checkValidOption();>

    <option />

    <option value=EQUALS>EQUALS</option>

    <option value=CONTAINS>CONTAINS</option>

    <option value=NOT CONTAINS>NOT CONTAINS</option>

    <option value=REGEX>REGEX</option>

</select>

What I'd like to happen is that checkValidOption() could make it so that if Plugin ID is selected in field that the only option is EQUALS (and it's selected) and otherwise all the other options are available. Any idea on how to approach this?

I tried changing the innerHTML of the operator select in JS:

document.getElementById(operator).innerHTML =

    <option value='EQUALS'>EQUALS</option>;

However this results in an empty select (this would also include manually setting the many options for going back to having all the ones listed above).

I can't think of another solution, any help would be greatly appreciated.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

arlethjeanettep

Add To Favorites

Follow

Total Points: 506

Total Questions: 96

Total Answers: 79

Location: Liberia

Member since Tue, Mar 14, 2023

1 Year ago

arlethjeanettep questions

1 How to mock a constructor instantiated class instance using jest?

Tue, May 17, 22, 00:00, 2 Years ago

1 How to bypass human verification 'press and hold' using Selenium in Python?

Sun, Aug 1, 21, 00:00, 3 Years ago

1 How to make drag to scroll work smoothly with scroll snapping

Sun, Jun 13, 21, 00:00, 3 Years ago

1 Rate limit the number of request made from react client to API

Fri, Jan 22, 21, 00:00, 3 Years ago

1 How to test if React component is returning null or its children using React Testing Library?

Wed, Jul 15, 20, 00:00, 4 Years ago

View All

answered 11 Years ago brooksb · Accepted Answer

Try this:

Demo here

var field = document.getElementById('field');

var operator = document.getElementById('operator');

field.onchange = function () { fieldcheck(); }

operator.onchange = function () { fieldcheck(); }

fieldcheck();



function fieldcheck() {

    if (field.value == 'Plugin ID') {

        for (i = 0; i < operator.options.length; ++i) {

            if (operator.options[i].value != 'EQUALS') {

                operator.options[i].disabled = true;

            }

        };

        operator.value = 'EQUALS';

    } else {

        for (i = 0; i < operator.options.length; ++i) {

            operator.options[i].disabled = false;

        };

    }

}