基於另一個下拉列表啟用/禁用下拉列表

Question

我有 2 個下拉列表

<select id="servergroup" multiple="multiple">             
  <option value="P1">P1</option>
  <option value="P2">P2</option>
  <option value="P3">P3</option>
  <option value="P4">P4</option>
</select>

<select id="servername" multiple="multiple">
  <option value="s597ap233">s597ap233</option>
  <option value="s597dp392">s597dp392</option>
  <option value="s397dp095">s397dp095</option> 
</select>

我希望僅當我們在第一個下拉列表中選擇一個值時才啟用第二個下拉列表。 如果我們從第一個下拉列表中取消選擇該值，它應該再次被禁用。 我可以知道如何使用 jQuery 來實現嗎？

Answer 1

您可以使用disabled屬性並使用JavaScript，可以將其設置為false或true

 function check(){ if(document.getElementById('servergroup').value!='') document.getElementById('servername').disabled=false; else document.getElementById('servername').disabled=true; } 

 <select onchange="check()" id="servergroup" multiple="multiple"> <option value="P1">P1</option> <option value="P2">P2</option> <option value="P3">P3</option> <option value="P4">P4</option> </select> <select disabled id="servername" multiple="multiple"> <option value="s597ap233">s597ap233</option> <option value="s597dp392">s597dp392</option> <option value="s397dp095">s397dp095</option> </select> 

Answer 2

$('#bonusVoucher').prop('disabled',false);
jQuery('#bonusVoucher').selectpicker('refresh'); 

像這樣使用 selectpicker，最重要的部分是：

注意：將 bootsrap selectpicker 腳本放在 jquery 腳本之后。

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/js/bootstrap-select.min.js"></script>

Answer 3

jQuery解決方案。

 function change() { if ($('#servergroup option:selected').length) { $('#servername').attr('disabled', false); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="servergroup" multiple="multiple" onchange='change()'> <option value="P1">P1</option> <option value="P2">P2</option> <option value="P3">P3</option> <option value="P4">P4</option> </select> <select id="servername" multiple="multiple" disabled> <option value="s597ap233">s597ap233</option> <option value="s597dp392">s597dp392</option> <option value="s397dp095">s397dp095</option> </select> 

Answer 4

首先添加

<option value="-1"> -Select Server Group- </option>

和

<option value="-1"> -Select Server Name- </option>

分別到你的下拉框。

我們可以使用JQuery實現請求的操作，如下所示：

$(document).ready(function ()
{
    //making serverName Dropdown box disabled by default.
    $('#servername').prop('disabled', true);

    $('#servergroup').change(function ()
    {
        if($(this).val == "-1")
        {
           $('#servername').val = "-1";
           $('#servername').prop('disabled', true);
        }
        else
        {   
          $('#servername').prop('disabled', false); 
        }  
    });
});