Disable option in the other form

Question

how can I disable the option in the second choice part? For example, In the FIRST CHOICE* form I chose the "Art & Design" option then it must be disabled in the SECOND CHOICE* form. I'm not really sure about my JavaScript code. Please help me thank you!

div class="mb-3 col-lg-6 positionn"><h6>FIRST CHOICE*</h6>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
                                 $('#first').change(function() {
        $('#second option[value="Art & Design"]').prop('disabled', $(this).val() == 'Art & Design')
    });
       </script>
       <select required class="form-control" style="border-radius: 25px;" name="firstchoice" id="first">
           <option disabled selected value="">Select First Choice</option>
           <option value="Art $ Design">Art & Design</option>
           <option>Content Development</option>
           <option>Customer Support</option>
           <option>Managing</option>
           <option>Marketing</option>
           <option>Photo</option>
           <option>Video</option>
           <option>Web Development</option>
          </select>
          </div>

          <div class="mb-3 col-lg-6 positionn"><h6>SECOND CHOICE*</h6>
          <select required class="form-control" style="border-radius: 25px;" name="secondchoice" id="second">
            <option disabled selected value="">Select Second Choice</option>
            <option value="Art $ Design">Art & Design</option>
            <option>Content Development</option>
            <option>Customer Support</option>
            <option>Managing</option>
            <option>Marketing</option>
            <option>Photo</option>
            <option>Video</option>
            <option>Web Development</option>
           </select>
     </div>

score 0 · Accepted Answer · answered Jan 15 '22 at 10:11

0

You need to track the state of firstchoice and depending on that state disable the secondchoice so something like that:

function val() {
            d = document.getElementById("firstchoice").value;

            if (d == 'Art & Design') {
                document.getElementById("art_design_second").disabled = true;
            }
        }

You should assign id's to each of the option tags, at least that's how I solved an issue similar to yours few weeks back

answered Jan 15 '22 at 10:11

Frevelman

338
3
11

Thank you is it like this? – nonstopjaguar Jan 15 '22 at 10:19
Correct, here is a SO post about id's in option tags https://stackoverflow.com/questions/53080200/how-to-set-an-id-to-option-in-html-dropdownlist If my answer helped you solve it I appreciate an upvote and checkmark :) good luck & happy coding! – Frevelman Jan 15 '22 at 10:29
1

is it okay if you run a sample snippet here? thank you so much! it says I'll be able to upvote your answer if I have 15 reputations sorry but I'll accept this if I made it work! thank you – nonstopjaguar Jan 15 '22 at 10:50
@nonstopjaguar i am currently only active on my phone, maybe I can run a snippet later on here. But as an advice, you learn much more trying to find a solution yourself, even when it takes hours on hours, once you get it running you realize how much you learnt when trying to figure it out instead of copying a solution – Frevelman Jan 15 '22 at 11:24

Disable option in the other form

1 Answers1