基于另一个下拉列表启用/禁用下拉列表答案

【问题标题】：Enable/disable drop down list based on another drop down list基于另一个下拉列表启用/禁用下拉列表
【发布时间】：2017-02-27 18:57:31
【问题描述】：

我有 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 来实现吗？

【问题讨论】：

想知道这种影响是否可以通过非 JS 方式实现。

标签： javascript jquery html

【解决方案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>

【讨论】：

我正在使用 jQuery 进行带有复选框的多选下拉列表，因此上述功能不起作用。请问我可以做什么。
这是脚本，因为 r= 上面的代码没有正确执行。我可以知道它有什么问题吗？

【解决方案2】：

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

像这样使用选择器，最重要部分是这样的：

注意：将 bootsrap selectpicker 脚本放在 jquery 脚本之后。

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案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); 
        }  
    });
});

【讨论】：