Question

有两个下拉框，当我在第一个下拉菜单中选择选项5时，应禁用另一个下拉框。同时，从数据库中获取下拉值。

<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>

Answer 1

我为dropdown1添加了更改处理程序，并在处理程序中检查所选值并基于该值禁用了其他下拉菜单。

请参见下面的可运行代码段。我希望这就是您的期望。

$('#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>

Answer 2

您应该尝试

HTML

<select id="ddl1" onchange='fnChange()'>
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
  <option value="Four">Four</option>
  <option value="five">Five</option>
</select>

<select id="ddl2">
  <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>

jQuery

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
function fnChange(){

    if($('#ddl1').val()== "Four") {
        $('#ddl2').prop("disabled", true);
    } else {
      $('#ddl2').prop("disabled", false);
    }

}

</script>

我希望这会起作用

Answer 3

我们可以通过以下方式禁用下拉框：范例- 在html中-

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

现在在js代码中写：

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

}

在需要时运行此功能。

使用JavaScript禁用下拉菜单

3 个答案: