How can I make enable other SelectBox values when I change the value of another SelectBox?

Question

I have 3 SelectBoxes, they can have values as 1,2,3.

Their names are "a","b","c". I only want to reach them using their names.

When I use this function, on first SelectBox's onChange event,

var  source = document.getElementsByName("a")[0]; 
document.getElementsByName("b")[0].options[source.value].setAttribute("disabled","disabled");
document.getElementsByName("c")[0].options[source.value].setAttribute("disabled","disabled");

And for second SelectBox's onChange event,

var  source = document.getElementsByName("b")[0];
document.getElementsByName("c")[0].options[source.value].setAttribute("disabled","disabled");

It works. But if i change firstSelectBox's again... then I cant use the first value which was disabled, but should be enabled now.

I hope I am clear about what i want to do.

Here is the pic:

it doesnt get into for loop...

var optSecond = document.getElementsByName("nameSelectBox16257264317217")[0].options;

            for (var i = 1; i < optSecond.length; i++) {
                optSecond[i].removeAttribute("disabled");
                console.log(optSecond[i].value);
            }

            var optThird = document.getElementsByName("nameSelectBox162572643286379")[0].options;
            for (var i = 1; i < optThird .length; i++) {
                optThird[i].removeAttribute("disabled");
                console.log(optSecond[i].value);

            }

            var source = document.getElementsByName("nameSelectBox162572640796915")[0];
            document.getElementsByName("nameSelectBox16257264317217")[0].options[source.value].setAttribute("disabled", "disabled");
            document.getElementsByName("nameSelectBox162572643286379")[0].options[source.value].setAttribute("disabled", "disabled");

why don't you try to use Jquery instead and use if else condition? — Ask Warvin, Jul 12 '21 at 05:59
That's happen because you never enable it. Please make a executable snippet — Alireza Ahmadi, Jul 12 '21 at 06:01
This is a project which is full of forms.. All forms have same html but when i open on browser they all have different pages. So i dont know how to do it... Couldnt you help me by the question i tried to tell? thanks.. @AlirezaAhmadi — , Jul 12 '21 at 06:04
someone showed me this way, and i went so... but i couldnt succeed @AskWarvin — , Jul 12 '21 at 06:05
@helloWorld check this how to use jquery https://stackoverflow.com/questions/10659097/jquery-get-selected-option-from-dropdown — Ask Warvin, Jul 12 '21 at 06:14
Thanks, but i am expected to do this using their unique names.. not by id. @AskWarvin — , Jul 12 '21 at 06:16

score 0 · Accepted Answer · answered Jul 12 '21 at 06:26

0

You need to remove all disable attribute before set disable for a specific options.

And note that options is zero based index, so you have to use this options[source.value - 1] instead of options[source.value].

      function change() {
            var optB = document.getElementsByName("b")[0].options;
            for (var i = 0; i < optB.length; i++) {
                optB[i].removeAttribute("disabled");
            }

            var optC = document.getElementsByName("c")[0].options;
            for (var i = 0; i < optC.length; i++) {
                optC[i].removeAttribute("disabled");
            }

            var source = document.getElementsByName("a")[0];
            document.getElementsByName("b")[0].options[source.value - 1].setAttribute("disabled", "disabled");
            document.getElementsByName("c")[0].options[source.value - 1].setAttribute("disabled", "disabled");
        }
        function changeSecond() {
            var optC = document.getElementsByName("c")[0].options;
            for (var i = 0; i < optC.length; i++) {
                optC[i].removeAttribute("disabled");
            }


            var source = document.getElementsByName("b")[0];
            document.getElementsByName("c")[0].options[source.value - 1].setAttribute("disabled", "disabled");
        }

    <select name="a" onchange="change()">
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>

    <select name="b" onchange="changeSecond()">
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>

    <select name="c">
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>

answered Jul 12 '21 at 06:26

Alireza Ahmadi

8,579
5
15
42

1

Thank you for your detailed answer, i will try to do the same by following your code. I appreciate a lot! – Jul 12 '21 at 06:28
Hello, I did what you showed me. But when i change the firstSelectBox's value, i cant select the value which was disabled before, it doesnt get enabled – Jul 12 '21 at 07:31
For example, i choose 1 in first selectBox, and 3 in second selectBox, then if i change 1 to 2 in first SelectBox, i still cant choose 1 in second SelectBox – Jul 12 '21 at 07:33
1

in code snippet you made it worked, but idk why it didnt do the same on my local – Jul 12 '21 at 07:39
1

As you said my snippet is work correctly and if you apply this code in your local must be Ok – Alireza Ahmadi Jul 12 '21 at 07:40
1

Thank you, ill inform you once i get same result. But thank you for your solution. It helps me to understand what to do – Jul 12 '21 at 07:49
Sir, i have a problem, i found the reason.. It doesnt enable(removeAttributes) it just setAttributes, because it doesnt get into for loop... Idk why, but it doesnt go in for loop. How to do it? – Jul 12 '21 at 08:29
You need to make loop all over the options and remove `disable` attribute – Alireza Ahmadi Jul 12 '21 at 08:31
Could u please look at my code i am updating in my question, i tried to adjust your code to myself since i didnt want to use options[0] – Jul 12 '21 at 08:36
1

It seems to be OK. But note that in `options[source.value]` the `source.value` is index of options like `array[0]` if you want to find option by value you need to filter the options, However in your sample your value was `1,2,3` and `options[source.value - 1]` is still working – Alireza Ahmadi Jul 12 '21 at 08:42
yeah, there are 4 options, but the value of 1 is in index 1. option. Thats why I wanted to do it as `options[source.value]` but in my code , it doesnt get in `for loop` because i wrote `console.log` and it didnt write the `value` on the `console` and i dont know how i can solve this – Jul 12 '21 at 08:46
log `optSecond ` and see is there any options? – Alireza Ahmadi Jul 12 '21 at 08:55
no , it doesnt log anything in `for loop` – Jul 12 '21 at 08:58
1

Sorry without executable code anyone can't help you – Alireza Ahmadi Jul 12 '21 at 08:59
1

you are right.. Thank you for your big help though. At least now i understand what i am doing by your help. Could you look at that question too? https://stackoverflow.com/questions/68339736/how-can-i-make-rows-show-or-hide-based-on-a-value-of-a-selectbox?noredirect=1#comment120779771_68339736 i think html doesnt sound anything on that page, but someone in the question wanted it, thats why i added. – Jul 12 '21 at 09:40

How can I make enable other SelectBox values when I change the value of another SelectBox?

1 Answers1