如何在下拉菜單中沒有選擇任何選項時啓用這些選項

Question

我有一個下拉選項和三個選項。最初啓用了三個選項。在選擇'收入頂線'或'保證金' - >'其他'選項時應該禁用。同樣在選擇「其他人」時應該禁用。 如果我取消已選定的選項仍然是「其他」選項處於禁用狀態only..how，使沒有選定......你能幫我

$("#outcomes").click(function() { 
 
    var name = outcomes.options[outcomes.selectedIndex].value; 
 
    if (name == 'others') { 
 
    //$('option[value=Margin]').prop('disabled', this.value === 'others'); 
 
    $('option[value=Revenue-top-line]').prop('disabled', true); 
 
    $('option[value=Margin]').prop('disabled', true); 
 
    document.getElementById('div1').innerHTML = '<input type="text" id="others" name="others" autocomplete="off" />'; 
 
    } else { 
 
    document.getElementById('div1').innerHTML = ''; 
 
    $('option[value=Revenue-top-line]').prop('disabled', false); 
 
    $('option[value=Margin]').prop('disabled', false); 
 
    $('option[value=others]').prop('disabled', true); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<td> 
 
    <select class="outcomes" id="outcomes" name="keyOutcomes" multiple="multiple" style="width: 310px;" onchange=""> 
 
    <option value="Revenue-top-line">Revenue top-line</option> 
 
    <option value="Margin">Margin(CTS/Client)</option> 
 
    <option value="others">others</option> 
 
    </select> <span id="outcomeaddress" style="margin-top: 29px; margin-left: 275px; color: red;"></span> 
 
    <div id="div1"></div> 
 
</td>

Answer 1

onclick事件無法通過點擊禁用的項目觸發。

請重試另一種方式。

<style> 
#hidden { 
    display: none; 
} 
</style> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script> 
function outcomes_fun(){ 
    var name = outcomes.options[outcomes.selectedIndex].value; 
    if (name == 'others') { 
     jQuery('option[value=Revenue-top-line]').prop('disabled', true); 
     jQuery('option[value=Margin]').prop('disabled', true); 
     document.getElementById('div1').innerHTML = '<input type="text" id="others" name="others" autocomplete="off" />'; 
     hidden.style.display="block"; 
     document.getElementById('hidden').innerHTML = '<strong>Other</strong> : <a href="#" class="remove" rel="Patient" onclick="remove(1);">remove</a>'; 
    }else{ 
     document.getElementById('div1').innerHTML = ''; 
     jQuery('option[value=Revenue-top-line]').prop('disabled', false); 
     jQuery('option[value=Margin]').prop('disabled', false); 
     jQuery('option[value=others]').prop('disabled', true); 
     hidden.style.display="block"; 
     document.getElementById('hidden').innerHTML = '<strong> Revenue top-line or Margin(CTS/Client)</strong> : <a href="#" class="remove" rel="Patient" onclick="remove(0);">remove</a>'; 
    } 
} 
function remove(data){ 
    if(data == 0){ 
     hidden.style.display="none"; 
     jQuery('option[value=others]').prop('disabled', false); 
    }else if(data == 1){ 
     hidden.style.display="none"; 
     document.getElementById('div1').innerHTML = ''; 
     jQuery('option[value=Revenue-top-line]').prop('disabled', false); 
     jQuery('option[value=Margin]').prop('disabled', false); 
    } 
} 
</script> 
<td> 
    <select class="outcomes" id="outcomes" name="keyOutcomes" multiple="multiple" style="width: 310px;" onchange="outcomes_fun()"> 
    <option value="Revenue-top-line">Revenue top-line</option> 
    <option value="Margin">Margin(CTS/Client)</option> 
    <option value="others">others</option> 
    </select> <span id="outcomeaddress" style="margin-top: 29px; margin-left: 275px; color: red;"></span> 
    <div id="div1"></div> 
<div id="hidden"></div> 
</td> 

Answer 2

我提高了你的代碼位：

selected_opt=new Array(); 
$("#outcomes").click(function() { 
    name = $(this).val(); 
    if(selected_opt.indexOf(name)==-1 || selected_opt.length==0){ 
    selected_opt.push(name); 
    if (name == 'others') { 
     //$('option[value=Margin]').prop('disabled', this.value === 'others'); 
     $('option[value=Revenue-top-line]').prop('disabled', true); 
     $('option[value=Margin]').prop('disabled', true); 
     document.getElementById('div1').innerHTML = '<input type="text" id="others" name="others" autocomplete="off" />'; 
    } else { 
     document.getElementById('div1').innerHTML = ''; 
     $('option[value=Revenue-top-line]').prop('disabled', false); 
     $('option[value=Margin]').prop('disabled', false); 
     $('option[value=others]').prop('disabled', true); 
    } 
    } 
    else{ 
var index = selected_opt.indexOf(5); 
    delete selected_opt[index]; 
    $("option[value="+name+"]").prop("selected", false); 
    $('option[value=others]').prop('disabled', false); 
    } 
}); 

這裏工作的例子：https://jsfiddle.net/znxhgknw/

替代解決方案：

<td> 
    <input type="checkbox" id="Revenue-top-line" class="outcomes"/> <label for="Revenue-top-line">Revenue-top-line</label><br/> 
    <input type="checkbox" id="Margin" class="outcomes"/> <label for="Margin">Margin</label><br/> 
    <input type="checkbox" id="others" class="outcomes"/> <label for="others">others</label><br/> 
    <span id="outcomeaddress" style="margin-top: 29px; margin-left: 275px; color: red;"></span> 
    <div id="div1"></div> 
</td> 

$(".outcomes").click(function() { 
    if($("#Revenue-top-line").is(':checked') || $("#Margin").is(':checked')){ 
    $("#others").attr("disabled",true); 
    } 
    else if($("#others").is(':checked')){ 
    $("#Revenue-top-line,#Margin").attr("disabled",true); 
    $("#div1").html('<input type="text" id="ipt_others" name="others" autocomplete="off" />'); 
    } 
    else{ 
    $(".outcomes").attr("disabled",false); 
    } 
}); 

工作例如：https://jsfiddle.net/wqsgLf79/

Answer 3

試試看，

HTML：

<select class="outcomes" id="outcomes" name="keyOutcomes" multiple  style="width: 310px;" onchange=""> 
<option value="Revenue-top-line">Revenue top-line</option> 
<option value="Margin">Margin(CTS/Client)</option> 
<option value="others">others</option> 

<button id="btnReset">Reset</button> 

的JavaScript：

$('#outcomes').change(function(e){ 
var selectedValue = $(this).val(); 
if(selectedValue.indexOf('Revenue-top-line') == 0 || 
    selectedValue.indexOf('Margin') == 0) { 
    $('#outcomes option[value="others"]').attr('disabled', true); 
    } 
    else { 
    $('#outcomes option[value="Revenue-top-line"], #outcomes option[value="Margin"]').attr('disabled', true); 
    } 
}); 

$('#btnReset').click(function(){ 
    $('#outcomes').val(''); 
    $('#outcomes option').attr('disabled', false); 
}); 

親身體驗：

JSFiddle

Answer 4

大多隻是爲了好玩，我做了一個自定義的下拉菜單。然後（當然），你可以處理onClick事件，或其他任何事情。

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Custom dropdown</title> 
    <style> 
    </style> 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
</head> 
<body> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    <div id="my_dropdown"> 
    <input class="display" /> 
    <span class="button">X</span> 
    <ul class="options"> 
     <li>Hello</li> 
     <li>World</li> 
    </ul> 
    </div> 
    Quisque sed commodo quam. Maecenas accumsan placerat sagittis. 
    <div id="my_dropdown2"> 
    <input class="display" /> 
    <span class="button">X</span> 
    <ul class="options"> 
     <li>Foo</li> 
     <li>Bar</li> 
    </ul> 
    </div> 
    Vivamus molestie ullamcorper venenatis. 
<script> 
    var dropdown; 
    var dropdown2; 
    $(document).ready(function() { 
    // does not auto close after click on option 
    dropdown = new Custom_dropdown('my_dropdown'); 
    dropdown.autoClose = false; 
    // onclick event: 
    dropdown.onSelect = function(index) { 
     console.log('option selected: ' + index); 
    } 
    dropdown.init(); 
    // auto closes after click on option 
    dropdown2 = new Custom_dropdown('my_dropdown2'); 
    dropdown2.init(); 
    }); 
</script> 
<style> 
    #my_dropdown, #my_dropdown2 { 
     /*position: relative;*/ 
     display: inline-block; 
     background: #f0f0f0; 
     border: 1px solid #666666; 
    } 
    .hover { 
     background: #339999; 
    } 
    .options { 
     display: none; 
     background: #e0e0e0; 
     position: absolute; 
     z-index: 5; 
     margin: 5px; 
     padding: 20px; 
     padding-top: 10px; 
    } 
    .options, .button { 
     cursor: pointer; 
    } 
</style> 
<script> 
    // constructor 
    function Custom_dropdown(id) { 
    this.id = id; 
    // jQuery selectors 
    this.display = '.display'; 
    this.button = '.button'; 
    this.options = '.options'; // container/parent of the options 
    // custom event handlers 
      // this.onOpen; // not yet implemented 
      // this.onClose; // not yet implemented 
    this.onSelect; 
    // properties 
    this.autoClose = true; // if set to true, the dropdown closes when an option is clicked on 
    this.showOptions = false; 
    } 
    // init function. Before calling init, you can still change settings 
    Custom_dropdown.prototype.init = function() { 
    var self = this; // since 'this' changes its meaning indifferent functions, we define 'self'... 
    // on click button 
    $('#' + self.id).find(this.button).on('click', function(e) { 
     if(self.showOptions) { 
     hideOptions(); 
     } 
     else { 
     showOptions(); 
     } 
    }); 
    // on mouse over (over an option) 
    $('#' + self.id).find(this.options).children().on('mouseover', function(e) { 
     $('#' + self.id).find(self.options).children().removeClass('hover'); 
     $(this).addClass('hover'); 
    }); 
    // on click (on an option) 
    $('#' + self.id).find(this.options).children().on('click', function(e) { 
     selectOption(this); 
    }); 
    function selectOption(elm) { 
     var value = $(elm).html(); 
     var index = $('#' + self.id).find(self.options).children().index(elm); 
     $('#' + self.id).find(self.display).val(value); 
     // close/hide the options 
     if(self.autoClose) { 
     hideOptions(); 
     } 
     if(typeof self.onSelect == 'function') { 
     self.onSelect(index); 
     } 
    } 
    function hideOptions() { 
     self.showOptions = false; 
     $('#' + self.id).find(self.options).hide(); 
    } 
    function showOptions() { 
     self.showOptions = true; 
     $('#' + self.id).find(self.options).show(); 
    } 
    } 
</script> 
</body> 
</html>