JQuery выбрать все варианты множественного выбора выбрать поле при нажатии

55

Это мой HTML

<select name="countries" id="countries" MULTIPLE size="8">
   <option value="UK">UK</option>
   <option value="US">US</option>
   <option value="Canada">Canada</option>
   <option value="France">France</option>
   <option value="India">India</option>
   <option value="China">China</option>
</select>
<br />
<input type="button" id="select_all" name="select_all" value="Select All">

Когда пользователь нажимает кнопку "Выбрать все", я хочу, чтобы все опции в окне выбора были выбраны

$('#select_all').click( function() {
    // ?
});
  • 0
    Я предлагаю вам прочитать этот комментарий TJ Croweder
Теги:

8 ответов

145
Лучший ответ

Попробуйте следующее:

$('#select_all').click(function() {
    $('#countries option').prop('selected', true);
});

И здесь живая демонстрация.

Поделиться
  • 0
    Благодарю. Именно то, что я хотел
  • 1
    Спасибо +1. Почему второй выбранный требуется в prop('selected', 'selected') ?
Показать ещё 8 комментариев
15

Для jQuery версий 1.6+, затем

$('#select_all').click( function() {
    $('#countries option').prop('selected', true);
});

Или для более старых версий:

$('#select_all').click( function() {
    $('#countries option').attr('selected', 'selected');
});

LIVE DEMO

Поделиться
  • 0
    selected="true" - недопустимый xhtml, возможно, было бы лучше использовать selected="selected"
  • 2
    @Alp. Прочтите спецификацию: «selected [CI] Когда установлено, этот логический атрибут указывает, что эта опция предварительно выбрана». булева! , И посмотрите этот пример из документации: $("input").prop("checked", true);
Показать ещё 6 комментариев
4

попробуйте это,

вызовите метод selectAll() onclick и напишите функцию кода следующим образом

function selectAll(){
    $("#id").find("option").each(function(this) {
    $(this).attr('selected', 'selected');
    });
}
Поделиться
2

Присвойте атрибуту selected всем параметрам, таким как

$('#countries option').attr('selected', 'selected');

Использование:

$('#select_all').click( function() {
    $('#countries option').attr('selected', 'selected');
});

Update

Если вы используете 1.6+, лучшим вариантом будет использование .prop() вместо .attr()

$('#select_all').click( function() {
    $('#countries option').prop('selected', true);
});
Поделиться
  • 1
    Прабху рок на и против. +1 за это.
  • 0
    @ShreeKhanal. Обратите внимание, что для jQuery 1.6+ вы должны использовать .prop а не attr для подобных вещей.
Показать ещё 1 комментарий
1

Если вы используете JQuery 1.9+, то выше ответы не будут работать в Firefox.

Итак, вот код для последнего jquery, который будет работать во всех браузерах.

Смотрите живая демонстрация

Вот код

var select_ids = [];
$(document).ready(function(e) {
    $('select#myselect option').each(function(index, element) {
        select_ids.push($(this).val());
    })
});

function selectAll()
{
    $('select#myselect').val(select_ids);
}

function deSelectAll()
{
    $('select#myselect').val('');
}

Надеюсь, это поможет вам...:)

Поделиться
1

Рабочий демонстрационный пример

$('#select_all').click( function() {
    $('select#countries > option').prop('selected', 'selected');
});

Если вы используете jQuery старше 1.6:

$('#select_all').click( function() {
    $('select#countries > option').attr('selected', 'selected');
});
Поделиться
0

Я могу сделать это на родном пути @jsfiddle. Надеюсь, это поможет.

Опубликуйте улучшенный ответ, когда он работает, и помогите другим.

$(function () { 

    $(".example").multiselect({
                checkAllText : 'Select All',
            uncheckAllText : 'Deselect All',
            selectedText: function(numChecked, numTotal, checkedItems){
              return numChecked + ' of ' + numTotal + ' checked';
            },
            minWidth: 325
    });
    $(".example").multiselect("checkAll");    

});

http://jsfiddle.net/shivasakthi18/25uvnyra/

Поделиться
0

попробовать

$('#select_all').click( function() {
    $('#countries option').each(function(){
        $(this).attr('selected', 'selected');
    });
});

это даст вам больше возможностей в будущем для написания таких вещей, как

$('#select_all').click( function() {
    $('#countries option').each(function(){
        if($(this).attr('something') != 'omit parameter')
        {
            $(this).attr('selected', 'selected');
        }
    });
});

В принципе позволяет вам выбирать всех членов ЕС или что-то в случае необходимости позже по линии

Поделиться
  • 0
    Неправильный ответ. :(
  • 1
    Почему .each() ?
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню