Disable the drop down using JavaScript

Question

There are two drop down boxes, when I select option 5 in first drop down then another drop down box should be disabled. While, drop down values are fetched from database.

<tr>
   <td class="outside scrollable-menu"
      style="border-style: none; border-bottom-style: none;">
      Education<span
         style="color: red;">*</span> 
      <form:select
         path="educationBean.educationId" id="education"
         class="form-control modalEdit">
         <form:option hidden="hidden" value="">Education</form:option>
         <c:forEach items="${educationList}" var="education">
            <form:option value="${education.educationId}">${education.educationName}
            </form:option>
         </c:forEach>
      </form:select>
   </td>
   <td class="outside scrollable-menu"
      style="border-style: none; border-bottom-style: none;">
      Degree<span
         style="color: red;">*</span> 
      <form:select
         path="degreeBean.degreeId" id="degree"
         class="form-control modalEdit">
         <form:option hidden="hidden" value="">Degree</form:option>
         <c:forEach items="${degreeList}" var="degree">
            <form:option value="${degree.degreeId}">${degree.degreeName}
            </form:option>
         </c:forEach>
      </form:select>
   </td>
</tr>

<script>
    function disableDegree() {
        if (document.getElementById("education").value === "5") {
            document.getElementById("deg").disabled = "true";
        } else {
            document.getElementById("deg").disabled = "false";
        }
    }
</script>

You want to disable box 2 when option 5 in box 1 is chosen specifically? Or you want to disable box 2 when any option in box 1 is selected? — MatrixTXT
– MatrixTXT, Commented Jul 2, 2018 at 9:59

trinadh · Accepted Answer · 2018-07-02 10:13:38Z

I have added change handler for dropdown1, and in the handler check for the selected value and based on that disable the other dropdown.

Please see below runnable code snippet. I hope this is what you are expecting.

$('#Dropdown1').on('change', function() {
    if($(this).val()== "5") {
        $('#Dropdown2').prop("disabled", true);
    } else {
      $('#Dropdown2').prop("disabled", false);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<select id="Dropdown1">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<select id="Dropdown2">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Ekta Tiwari · Accepted Answer · 2018-07-02 10:00:03Z

0

we can disabled the dropdown box in following manner : Example - In html -

<select id="mySelect">
   <option>Apple</option>
   <option>Pear</option>
   <option>Banana</option>
   <option>Orange</option>
</select>

now in js code write :

function disable(){
document.getElementById("mySelect").disabled = true;

}

run this function whenever required.

answered Jul 2, 2018 at 10:00

Ekta Tiwari

111 silver badge3 bronze badges

2 Comments

Learning Over a year ago

No i am not using select id... data is coming from database. Ex: <option>One</option> so if One equlas to the getElementById then degree drop down should be disabled

Ekta Tiwari Over a year ago

$('#Dropdown1').on('change', function() { if($(this).val()== "One") { $('#Dropdown2').prop("disabled", true); } else { $('#Dropdown2').prop("disabled", false); } }); you can surely check the condition using this and then disable

Collectives™ on Stack Overflow

Disable the drop down using JavaScript

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related