code

JQuery는 클릭시 다중 선택 선택 상자의 모든 옵션을 선택합니다.

codestyles 2020. 11. 16. 08:19
반응형

JQuery는 클릭시 다중 선택 선택 상자의 모든 옵션을 선택합니다.


이것은 내 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() {
    // ?
});

이 시도:

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

그리고 여기에 라이브 데모가 있습니다.


jQuery 버전 1.6 이상의 경우

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

또는 이전 버전의 경우 :

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

라이브 데모


이 시도,

selectAll () onclick 메소드를 호출하고 다음과 같이 코드 함수를 작성하십시오.

function selectAll(){
    $("#id").find("option").each(function(this) {
    $(this).attr('selected', 'selected');
    });
}

selected이와 같은 모든 옵션에 속성을 부여 하십시오.

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

용법:

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

최신 정보

1.6 이상을 사용하는 경우 더 나은 옵션은 .prop()대신 사용하는 것입니다..attr()

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

작동 데모

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

1.6보다 오래된 jQuery를 사용하는 경우 :

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

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('');
}

이것이 당신을 도울 것입니다 ... :)


시험

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

this will give you more scope in the future to write things like

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

Basically allows for you to do a select all EU members or something if required later down the line


I'm able to make it in a native way @ jsfiddle. Hope it will help.

Post improved answer when it work, and help others.

$(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/

참고URL : https://stackoverflow.com/questions/9924666/jquery-select-all-options-of-multi-select-select-box-on-click

반응형