选择多只允许一个选择某些选项

Question

如何使选择某一部分可以选择多个或只有一个。下面是HTML

<div class="bootstrap-select active_select col-sm-12 col-md-3 col-lg-3"> 
    <select class="selectpicker" id="cron_dow" data-style="btn btn-success" name="cron_dow" required multiple> 

     //this 3 item can only be select only one, clear multiple selection if this any 3 item selected 
     <option value="*" class="only_one">Every Weekdays</option> 
     <option value="1,2,3,4,5" class="only_one">Monday - Friday</option> 
     <option value="0,6" class="only_one">Weekends</option> 

     //this 7 item can select multiple, clear above selection if selected 
     <option value="1" title="Weekday: Monday" >Monday</option> 
     <option value="2" title="Weekday: Tuesday" >Tuesday</option> 
     <option value="3" title="Weekday: Wednesday" >Wednesday</option> 
     <option value="4" title="Weekday: Thursday" >Thursday</option> 
     <option value="5" title="Weekday: Friday" >Friday</option> 
     <option value="6" title="Weekday: Saturday" >Saturday</option> 
     <option value="0" title="Weekday: Sunday" >Sunday</option> 
    </select> 
</div> 

有重复的帖子建议删除多个属性..这不是我的情况..前3只可以选择一个（在代码注释），那么它会清除任何其他的选择。其他7周一至周日均可多选..

Answer 1

基于从@noobcode答案，@ cumminUpp07 ......我走出我自己的答案..和如果我只使用纯选择选项..但使用自举selectpicker IM工作.. @ noobcode工作..什么做的是..我只是引发了渲染选项引导选.. :)谢谢你们..

还有<select ..... multiple **size=7**>实际上使其完美..

$("select[name='cron_dow']").change(function() { 
    if ($(this).find('option:selected').hasClass('only_one')) { 
     console.log("Up: " + $(this).val()); 
     jQuery("#cron_dow").removeAttr("multiple"); 
    } else { 
     jQuery("#cron_dow").attr("multiple", "multiple"); 
     console.log("Down: " + $(this).val()); 
    } 

    $('.cron_dow').selectpicker('render'); 

}); 

Answer 2

怎么样在两个选择元素，其中第一个不具有多重属性

<select name="option1" required> 
 
     <option value="*" class="only_one">Every Weekdays</option> 
 
     <option value="1,2,3,4,5" class="only_one">Monday - Friday</option> 
 
     <option value="0,6" class="only_one">Weekends</option> 
 
    </select>  
 
    <select name="option2" required multiple> 
 
     <option value="1" title="Weekday: Monday" >Monday</option> 
 
     <option value="2" title="Weekday: Tuesday" >Tuesday</option> 
 
     <option value="3" title="Weekday: Wednesday" >Wednesday</option> 
 
     <option value="4" title="Weekday: Thursday" >Thursday</option> 
 
     <option value="5" title="Weekday: Friday" >Friday</option> 
 
     <option value="6" title="Weekday: Saturday" >Saturday</option> 
 
     <option value="0" title="Weekday: Sunday" >Sunday</option> 
 
    </select>

Answer 3

您分裂他们可以单击事件处理程序附加到每个选项，并因此采取正确的行动：

$('#cron_dow option').on('click', function (e) { 
 
    if ($(this).is('.only_one')) { 
 
     // 
 
     // no more than 1 only_one selected 
 
     // 
 
     if ($('#cron_dow option.only_one:selected').length > 1) { 
 
      $(this).prop('selected', false); 
 
     } 
 
     // 
 
     // deselect the remaining 
 
     // 
 
     $('#cron_dow option:not(.only_one):selected').prop('selected', false); 
 
    } else { 
 
     // 
 
     // deselect all the only_one options 
 
     // 
 
     $('#cron_dow option.only_one:selected').prop('selected', false); 
 
    } 
 
})

select { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="bootstrap-select active_select col-sm-12 col-md-3 col-lg-3"> 
 
    <select class="selectpicker" id="cron_dow" data-style="btn btn-success" name="cron_dow" required multiple size=10> 
 

 
     //this 3 item can only be select only one, clear multiple selection if this any 3 item selected 
 
     <option value="*" class="only_one">Every Weekdays</option> 
 
     <option value="1,2,3,4,5" class="only_one">Monday - Friday</option> 
 
     <option value="0,6" class="only_one">Weekends</option> 
 

 
     //this 7 item can select multiple, clear above selection if selected 
 
     <option value="1" title="Weekday: Monday">Monday</option> 
 
     <option value="2" title="Weekday: Tuesday">Tuesday</option> 
 
     <option value="3" title="Weekday: Wednesday">Wednesday</option> 
 
     <option value="4" title="Weekday: Thursday">Thursday</option> 
 
     <option value="5" title="Weekday: Friday">Friday</option> 
 
     <option value="6" title="Weekday: Saturday">Saturday</option> 
 
     <option value="0" title="Weekday: Sunday">Sunday</option> 
 
    </select> 
 
</div>

Answer 4

你可以做一些逻辑测试，看看最后点击的是一个only_one选项，然后取消选择休息，或者如果非only_one选项，这里选择是小提琴https://jsfiddle.net/tvL3em2f/和相关代码取消选择所有only_one选项：

$('#cron_dow option').click(function(){ 
    if($(this).hasClass('only_one')) { 
     $('#cron_dow').val($(this).val()); 
    } 
    else { 
     $('option.only_one').prop('selected',false); 
    } 
    }) 

Answer 5

这仅给出前3个选项选择中的一个值和最后7个选项上的多个选择。试试这个： -

静态值电平变化检查，但它的工作原理

$("select[name='cron_dow']").change(function(){ 
 
     console.log($(this).val());  
 
     if($(this).val() == "1,2,3,4,5" || $(this).val() == "*" || $(this).val() == "0,6"){ 
 
     //console.log("sjdhsj"); 
 
     \t jQuery("#cron_dow").removeAttr("multiple"); 
 
     } 
 
     else{ 
 
     //console.log('hello'); 
 
     \t jQuery("#cron_dow").attr("multiple","multiple"); 
 
     } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<div class="bootstrap-select active_select col-sm-12 col-md-3 col-lg-3"> 
 
    <select class="selectpicker" id="cron_dow" data-style="btn btn-success" name="cron_dow" required multiple> 
 

 
     //this 3 item can only be select only one, clear multiple selection if this any 3 item selected 
 
     <option value="*" class="only_one">Every Weekdays</option> 
 
     <option value="1,2,3,4,5" class="only_one">Monday - Friday</option> 
 
     <option value="0,6" class="only_one">Weekends</option> 
 

 
     //this 7 item can select multiple, clear above selection if selected 
 
     <option value="1" title="Weekday: Monday" class="byy" >Monday</option> 
 
     <option value="2" title="Weekday: Tuesday" class="byy" >Tuesday</option> 
 
     <option value="3" title="Weekday: Wednesday" class="byy" >Wednesday</option> 
 
     <option value="4" title="Weekday: Thursday" class="byy">Thursday</option> 
 
     <option value="5" title="Weekday: Friday" class="byy">Friday</option> 
 
     <option value="6" title="Weekday: Saturday" class="byy">Saturday</option> 
 
     <option value="0" title="Weekday: Sunday" class="byy">Sunday</option> 
 
     </select> 
 
    </div>