【问题标题】:Disable Option 2 when Option 1 is selected选择选项 1 时禁用选项 2
【发布时间】:2017-05-23 13:49:15
【问题描述】:

我需要修改一些用于我正在为我工​​作的学校创建的网站的代码,以禁止同时选择某些选项。

向用户呈现以下 HTML 下拉列表 6 次:

<select type="select" name="optRes2" select id="optRes2">
    <option value="" disabled selected hidden>Please select an option...</option>
    <option value="Art">Art</option>
    <option value="Business Studies">Business Studies</option>
    <option value="Computing">Computing</option>
    <option value="Drama">Drama</option>
    <option value="French">French</option>
    <option value="Food Technology">Food Technology</option>
    <option value="Geography">Geography</option>
    <option value="German">German</option>
    <option value="History">History</option>
    <option value="Music">Music</option>
    <option value="Philosophy and Ethics">Philosophy and Ethics</option>
    <option value="Product Design">Product Design</option>
    <option value="Physical Education">Physical Education</option>
    <option value="Spanish">Spanish</option>
    <option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
    <option value="Textiles">Textiles</option>
</select>

用户不能同时选择艺术和纺织品。他们可以选择艺术或纺织品——但不能同时选择两者。

例如:用户在 opt1 中选择了“艺术”,因此在其余 5 个菜单中禁用了 Textiles。如果用户返回并取消选择 Art,则应始终启用 Textiles。希望你明白我的意思。

我已经有防止多次选择相同选项的代码:

$(function() {
    $('select').change(function(){
        if($(this).attr('id') == 'opt1' && $(this).val() == 'Default'){
            $('select').not(this).prop('disabled', true).val('Disabled');
        } else {
            $('select').not(this).removeProp('disabled');
            $('select option').removeProp('disabled');
            $('select').each(function() {
                var val = $(this).val();
                if(val != 'Default' || val != 'Disabled'){
                    $('select option[value="'+val+'"]').not(this).prop('disabled', true);
                }
            });
        }
    });
});

然后用户单击提交,然后所有这些都将提交到 MySQL 服务器以供以后审核。

菜单名为 opt1、opt2、opt3、opt4、optRes1 和 optRes2。

谢谢大家,

杰克

【问题讨论】:

  • 可能类似于&lt;option value="Art" data-not-with="Textiles"&gt;(对于 Textiles 则相反),然后在您的更改处理程序中检查该属性以查看要禁用哪些(如果有)其他选项。顺便说一句,为什么不同时将艺术和纺织品?它们是完全不同的主题......
  • 为什么不用用户 onchange 事件而不是数组。filter 操作?
  • @nnnnnn,它基本上是GCSE的东西,学校要求用户不能同时参加这两个课程!

标签: javascript jquery html css


【解决方案1】:

尝试添加一个带有 id 选择的重叠 div,然后选择每个选择并在更改时禁用所选选项,如下所示:

<div id="selection">
            <select type="select" name="optRes2" select id="optRes2">
                <option value="" disabled selected hidden>Please select an option...                       </option>
                <option value="Art">Art</option>
                 etc
            </select>
    <select type="select" name="optRes3" select id="optRes3">
                <option value="" disabled selected hidden>Please select an option...                       </option>
                <option value="Art">Art</option>
                 etc
            </select>
    </div>

和脚本

<script type="text/JavaScript" language="JavaScript">
    $( "#optRes2" ).change(function() {
      $("div#selection select.select option").each(function(){
             if($(this).val()== $('#optRes2').val() ){ 
                $(this).attr("disabled","true");    
             }
       });
    });
    $( "#optRes3" ).change(function() {
      $("div#selection select.select option").each(function(){
             if($(this).val()== $('#optRes3').val() ){ 
                $(this).attr("disabled","true");    
             }
       });
    });
</script>

【讨论】:

    【解决方案2】:

    我使用名为notallowed 的数据属性。在那里您可以设置应该禁用的值。当一个值发生变化时,我们还会检查我们之前是否禁用了某些字段并重新启用它们。

    $('select').change(function(){
        
        var notAllowed = $(this).find('option:selected').data('notallowed');
        var currentValue = $(this).val();
        // Get the previous selected value.
        var oldValue = $(this).data('old');
        
        // Keep track of the previous selected value.
        $(this).data('old', currentValue);
        
        // Re-enabled all that was disabled by the previous selection.
        if(oldValue) {
          // Re-enable the old value in the other selects.
          $('select').not(this).find('option[value="' + oldValue +'"]').prop('disabled', false);
          
          // Get the option.
          var previousNotAllowed = $(this).find('option[value="' + oldValue +'"]').data('notallowed');
          if(previousNotAllowed){
            $('select').not(this).find('option[value="' + previousNotAllowed +'"]').prop('disabled', false);
          }
        }
        
      // If we selected a option with notallowed attribute we should disable that option in the other selects.
        if(notAllowed){
          var items = $('select').not(this).find('option[value="' + notAllowed +'"]').prop('disabled',true);
        }
      
      // Disable the current value in other selects.  
      $('select').not(this).find('option[value="' + currentValue +'"]').prop('disabled', true);
        
     });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <select type="select" name="optRes1" select id="optRes1">
      <option value="" disabled selected hidden>Please select an option...</option>
      <option value="Art" data-notallowed="Textiles">Art</option>
      <option value="Business Studies">Business Studies</option>
      <option value="Computing" data-notallowed="Drama">Computing</option>
      <option value="Drama" data-notallowed="Computing">Drama</option>
      <option value="French">French</option>
      <option value="Food Technology">Food Technology</option>
      <option value="Geography">Geography</option>
      <option value="German">German</option>
      <option value="History">History</option>
      <option value="Music">Music</option>
      <option value="Philosophy and Ethics">Philosophy and Ethics</option>
      <option value="Product Design">Product Design</option>
      <option value="Physical Education">Physical Education</option>
      <option value="Spanish">Spanish</option>
      <option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
      <option value="Textiles" data-notallowed="Art">Textiles</option>
    </select>
     
    <select type="select" name="optRes2" select id="optRes2">
      <option value="" disabled selected hidden>Please select an option...</option>
      <option value="Art" data-notallowed="Textiles">Art</option>
      <option value="Business Studies">Business Studies</option>
      <option value="Computing" data-notallowed="Drama">Computing</option>
      <option value="Drama" data-notallowed="Computing">Drama</option>
      <option value="French">French</option>
      <option value="Food Technology">Food Technology</option>
      <option value="Geography">Geography</option>
      <option value="German">German</option>
      <option value="History">History</option>
      <option value="Music">Music</option>
      <option value="Philosophy and Ethics">Philosophy and Ethics</option>
      <option value="Product Design">Product Design</option>
      <option value="Physical Education">Physical Education</option>
      <option value="Spanish">Spanish</option>
      <option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
      <option value="Textiles" data-notallowed="Art">Textiles</option>
    </select>
    <select type="select" name="optRes3" select id="optRes3">
        <option value="" disabled selected hidden>Please select an option...</option>
      <option value="Art" data-notallowed="Textiles">Art</option>
      <option value="Business Studies">Business Studies</option>
      <option value="Computing" data-notallowed="Drama">Computing</option>
      <option value="Drama" data-notallowed="Computing">Drama</option>
      <option value="French">French</option>
      <option value="Food Technology">Food Technology</option>
      <option value="Geography">Geography</option>
      <option value="German">German</option>
      <option value="History">History</option>
      <option value="Music">Music</option>
      <option value="Philosophy and Ethics">Philosophy and Ethics</option>
      <option value="Product Design">Product Design</option>
      <option value="Physical Education">Physical Education</option>
      <option value="Spanish">Spanish</option>
      <option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
      <option value="Textiles" data-notallowed="Art">Textiles</option>
    </select>

    【讨论】:

    • ahahahahaha,3个html选择而不是数据过滤操作
    • @degr - OP 说 向用户呈现以下 HTML 下拉列表 6 次。所以我假设它实际上显示了相同的选择 6 次。但是,我只收录了 3 次。
    • @degr - 此外,根据 OP 提供的代码,似乎所有选择都同时显示:$('select').not(this) 和 菜单被命名为 opt1、opt2、opt3、opt4 , optRes1 和 optRes2。
    • @JackAnyon - 是的。它在同一个下拉列表中启用,但在其他下拉列表中未启用。我认为这是预期的行为?
    • 好的,这确实有效,但我必须在最后一行将您的 &lt;option value="Textiles" data-notallowed="Textiles"&gt;Textiles&lt;/option&gt; 更改为 &lt;option value="Textiles" data-notallowed="Textiles"&gt;Art&lt;/option&gt;。再次感谢!
    【解决方案3】:

    最好创建选项数组,并处理数据,而不是 HTML。使用这种方法,您将能够保持干燥。

    认为解决方案很明确。

    <html>
    <body>
    
    <select type="select" name="optRes3" select id="optRes1">
        <option value="" disabled selected hidden>Please select an option...</option>
      <option value="Art">Art</option>
      <option value="Business Studies">Business Studies</option>
      <option value="Computing">Computing</option>
      <option value="Drama">Drama</option>
      <option value="French">French</option>
      <option value="Food Technology">Food Technology</option>
      <option value="Geography">Geography</option>
      <option value="German">German</option>
      <option value="History">History</option>
      <option value="Music">Music</option>
      <option value="Philosophy and Ethics">Philosophy and Ethics</option>
      <option value="Product Design">Product Design</option>
      <option value="Physical Education">Physical Education</option>
      <option value="Spanish">Spanish</option>
      <option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
      <option value="Textiles">Textiles</option>
    </select>
    <select type="select" name="optRes3" select id="optRes2">
        <option value="" disabled selected hidden>Please select an option...</option>
      <option value="Art">Art</option>
      <option value="Business Studies">Business Studies</option>
      <option value="Computing">Computing</option>
      <option value="Drama">Drama</option>
      <option value="French">French</option>
      <option value="Food Technology">Food Technology</option>
      <option value="Geography">Geography</option>
      <option value="German">German</option>
      <option value="History">History</option>
      <option value="Music">Music</option>
      <option value="Philosophy and Ethics">Philosophy and Ethics</option>
      <option value="Product Design">Product Design</option>
      <option value="Physical Education">Physical Education</option>
      <option value="Spanish">Spanish</option>
      <option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
      <option value="Textiles">Textiles</option>
    </select>
    <select type="select" name="optRes3" select id="optRes3">
        <option value="" disabled selected hidden>Please select an option...</option>
      <option value="Art">Art</option>
      <option value="Business Studies">Business Studies</option>
      <option value="Computing">Computing</option>
      <option value="Drama">Drama</option>
      <option value="French">French</option>
      <option value="Food Technology">Food Technology</option>
      <option value="Geography">Geography</option>
      <option value="German">German</option>
      <option value="History">History</option>
      <option value="Music">Music</option>
      <option value="Philosophy and Ethics">Philosophy and Ethics</option>
      <option value="Product Design">Product Design</option>
      <option value="Physical Education">Physical Education</option>
      <option value="Spanish">Spanish</option>
      <option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
      <option value="Textiles">Textiles</option>
    </select>
    
    <script>
    function OptResDropdown(htmlDropdown, value) {
        this.value = value;
        this.dropdown = htmlDropdown;
        this.options = this.initOptions(htmlDropdown.options);
        var selected = htmlDropdown.options[htmlDropdown.selectedIndex];
        this.value = value? value : (selected ? selected.value : 0); 
        var me = this;
        htmlDropdown.addEventListener('change', function(event){
            me.value = event.target.value;
            me.update(me.value);
        });
        this.update();
    }
    
    OptResDropdown.instances = {};
    
    OptResDropdown.prototype.initOptions = function(options){
        var me = this;
        var out = [];
        for(var i = 0; i < options.length; i++) {
            var option = options[i];
            out.push({value: option.value, label: option.innerText});
        }
        return out;
    };
    
    OptResDropdown.prototype.update = function(value) {
        for(var key in OptResDropdown.instances) {
            var me = OptResDropdown.instances[key];
            me.dropdown.innerHTML = '';
            var options;
            if(value === 'Art') {
                options = me.options.filter(function(option){
                    return option.value !== 'Textiles';
                });
            } else if(value === 'Textiles') {
                options = me.options.filter(function(option){
                    return option.value !== 'Art';
                });
            } else {
                options = me.options;
            }
            options.forEach(function(option){
                var opt = document.createElement('option');
                opt.value = option.value;
                opt.innerText = option.label;
                me.dropdown.appendChild(opt);
            })
            me.dropdown.value = me.value;
        }
    };
    
    
    
    var opt1 = new OptResDropdown(optRes1);
    var opt2 = new OptResDropdown(optRes2);
    var opt3 = new OptResDropdown(optRes3);
    
    OptResDropdown.instances.opt1 = opt1;
    OptResDropdown.instances.opt2 = opt2;
    OptResDropdown.instances.opt3 = opt3;
    
    </script>
    </body>
    </html>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-02-24
      • 1970-01-01
      • 2017-06-29
      • 1970-01-01
      相关资源
      最近更新 更多