選擇多隻允許一個選擇某些選項

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>