выбрать все в Multiselect dropdown

Question

Привет У меня есть выпадающий список с флажком. Выпадающий список будет что-то вроде этого: * Выбрать все * N1 * N2 * N3 * N4 Я хочу, чтобы выбрать все галочки по умолчанию. Но когда пользователь хочет выбрать выборочно, он/она должен снять флажок, чтобы выбрать все, что отменит выбор всех флажков, а затем он может выбрать.

<select id="filter-select" multiple="multiple" > 
     <option value="1">Select All</option> 
     <option value="2">N1</option> 
     <option value="3">N2</option> 
     <option value="4">N3</option> 
     <option value="5">N4</option> 
     <option value="6">N5</option> 
     <option value="7">N6</option> 
</select> 

Как это сделать, используя Javascript/JQuery?

Answer 1

Использование prop для установки выбран верно и в селекторе вам необходимо выбрать все параметры внутри #filter-select:

Update:

Обновлен фрагмент кода, чтобы убедиться, что выбранное значение опции 1 в select (т. е. SelectAll) для выбранного события изменения, если это так, выберите все параметры и очистите выбор первого параметра.

selectAll(); 
 

 
$('#filter-select').change(function(){ 
 

 
    if($("#filter-select option[value='1']").is(':selected')) 
 
    { 
 
    selectAll(); 
 
    } 
 

 
}) 
 

 
function selectAll() 
 
{ 
 
    $('#filter-select option').prop('selected', true); 
 
    $("#filter-select option[value='1']").prop('selected', false); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="filter-select" multiple="multiple" > 
 
     <option value="1">Select All</option> 
 
     <option value="2">N1</option> 
 
     <option value="3">N2</option> 
 
     <option value="4">N3</option> 
 
     <option value="5">N4</option> 
 
     <option value="6">N5</option> 
 
     <option value="7">N6</option> 
 
</select>

Answer 2

var selected=$('#filter-select option').prop('selected', true); 
console.log(selected.text()); 
$('#filter-select').change(function(){ 
alert($('option:selected',this).text()); 

}) 

demo

При выборе снова просто получить новое значение

Answer 3

Попробуйте использовать change обработчик с selectedIndex

$(function() { 
 
    var filter = $('#filter-select'); 
 
    filter.on('change', function() { 
 
    if (this.selectedIndex) return; //not `Select All` 
 
    filter.find('option:gt(0)').prop('selected', true); 
 
    filter.find('option').eq(0).prop('selected', false); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<select id="filter-select" multiple="multiple"> 
 
    <option value="1">Select All</option> 
 
    <option value="2">N1</option> 
 
    <option value="3">N2</option> 
 
    <option value="4">N3</option> 
 
    <option value="5">N4</option> 
 
    <option value="6">N5</option> 
 
    <option value="7">N6</option> 
 
</select>