Question

我有三个选项下拉。最初启用了三个选项。选择“收入最高线”或“保证金” - ＆gt;应禁用“其他人”选项。同样，在选择“其他”时，应禁用剩余的。如果我取消选择已经选择的选项仍然'其他'选项仅处于禁用状态..如何启用未选择任何内容...你能帮我吗

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

如何在下拉列表中选择任何内容时启用选项

4 个答案: