JQuery-값에 따라 드롭 다운 항목을 선택하는 방법

85

항목 값에 따라 드롭 다운 (선택)이 변경되도록 설정하고 싶습니다.

나는 가지고있다

<select id="mySelect">
  <option value="ps">Please Select</option>
  <option value="ab">Fred</option>
  <option value="fg">George</option>
  <option value="ac">Dave</option>
</select>

그리고 "fg"값이있는 옵션이 선택되도록 드롭 다운을 변경하고 싶습니다. JQuery로 어떻게 할 수 있습니까?

javascript  jquery  select  jquery-selectors 
— 마크 W
소스
그렇게 간단하다고 생각했지만 작동하지 않는 것 같습니다. 디버깅 시간 인 것 같습니다.
— Mark W
1
— 크리스토퍼
1
제목이 약간 오해의 소지가 있습니다. 드롭 다운을 선택하는 것이 아니라 드롭 다운에서 옵션을 선택하는 것입니다 ... 이것이 저에게 전혀 도움이되지 않는 7 개의 답변이있는 이유입니다 ...
— user1566694
@ user1566694 기술적 인 내용을 얻으려면 실제로 드롭 다운이라고하는 것이 아니라 "선택"입니다
— Mark W

답변:

151

당신은 사용해야합니다

$('#dropdownid').val('selectedvalue');

예를 들면 다음과 같습니다.

$('#dropdownid').val('selectedvalue');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='dropdownid'>
    <option value=''>- Please choose -</option>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='selectedvalue'>There we go!</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
    <option value='5'>5</option>
</select>
스 니펫 확장

— 제프 길버트
소스
21
위와 동의합니다. 코드에 따르면, 그것은 것$('#mySelect option[value="fg"]').attr('selected', true)
— Martavis P.
내 실수. 어떤 경우에는 작동하지 않는 것을 보았지만 바이올린에서는 분명히 작동합니다.
— Martavis P.
2
나는 이것을 조심할 것입니다. <select> 태그에서 'change'이벤트를 트리거하지 않습니다. 해당 이벤트를 사용하지 않는 경우 괜찮습니다.
— Chad Fisher
2
@ChadFisher 변경 이벤트를 사용하는 경우 다음과 함께 트리거하십시오.$('#dropdownid').val('selectedvalue').trigger('change');
— Liam
실제로 트리거 변경은 모델 업데이트와 같은 특정 작업을 수행하기 위해 후속 코드를 작성했을 때 도움이됩니다. 심지어 ASP.net 뷰 모델 업데이트도 DD의 변경 이벤트에서 발생합니다. +1
— Div Tiwari
23 
$('#yourdropddownid').val('fg');

선택적으로

$('select>option:eq(3)').attr('selected', true);

3원하는 옵션의 색인은 어디에 있습니까?

라이브 데모

— xbonez
소스
8

사용하기 쉬운이 jQuery 코드를 사용할 수 있습니다.

$('#your_id [value=3]').attr('selected', 'true');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="your_id" name="name" class="form-control input-md">
  <option value="1">Option #1</option>
  <option value="2">Option #2</option>
  <option value="3">Option #3</option>
  <option value="4">Option #4</option>
  <option value="5">Option #5</option>
  <option value="6">Option #6</option>
  <option value="7">Option #7</option>
</select>
스 니펫 확장

— 하늘
소스
7 
 $('#mySelect').val('ab').change();

 // or

 $('#mySelect').val('ab').trigger("change");
— Abdo- 호스트
소스
1
또는 $ ( '# mySelect'). val ( 'ab'). trigger ( "change") ;; select2 플러그인을 사용하는 경우.
— Vaibhav Jain
1
.change ()는 ASP.net MVC 모델 속성을 업데이트하는 데 도움이되었습니다. 답변 해주셔서 감사합니다.
— Div Tiwari
감사합니다 ... .trigger ( 'change') 완벽하게 작동합니다!
— LUISAO
5

다음을 간단히 사용할 수 있습니다. 

$('#select_id').val('fg')
— 다강
소스
2

대답하기에는 너무 늦을 수 있지만 적어도 누군가는 도움을받을 것입니다.

두 가지 옵션을 시도 할 수 있습니다.

인덱스 값을 기준으로 할당하고자 할 때의 결과입니다. 여기서 '0'은 Index입니다.

 $('#mySelect').prop('selectedIndex', 0);

최신 jquery에서 더 이상 사용되지 않으므로 'attr'을 사용하지 마십시오.

옵션 값을 기준으로 선택하려면 다음을 선택하십시오.

 $('#mySelect').val('fg');

여기서 'fg'는 옵션 값입니다.

— 만주 보이즈
소스
인덱스 기반 선택은 거의 사용되지 않지만 드롭 다운을 설정하기위한 일반적인 코드를 작성하고 값이 다른 DD에 따라 달라지는 시나리오를 고려할 때 좋은 옵션입니다. 감사 :).
— Div Tiwari
1 

$('#dropdownid').val('selectedvalue');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='dropdownid'>
    <option value=''>- Please choose -</option>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='selectedvalue'>There we go!</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
    <option value='5'>5</option>
</select>
스 니펫 확장

— 싯다르타
소스
1

이 코드는 나를 위해 일했습니다.

$(function() {
    $('[id=mycolors] option').filter(function() { 
        return ($(this).text() == 'Green'); //To select Green
    }).prop('selected', true);
});

이 HTML 선택 목록으로 :

<select id="mycolors">
      <option value="1">Red</option>
      <option value="2">Green</option>
      <option value="3">Blue</option>
</select>
— 놀
소스
0

드롭 다운 목록 값이 이미 하드 코딩 된 다른 상황이 있습니다. 12 개 구역 만 있으므로 jQuery 자동 완성 UI 컨트롤이 코드로 채워지지 않습니다.

솔루션은 훨씬 쉽습니다. 컨트롤이 동적으로로드되는 것으로 간주되는 다른 게시물을 검토해야했기 때문에 필요한 내용을 찾지 못해 마침내 파악했습니다.

따라서 아래와 같은 HTML이있는 곳에서 선택한 인덱스 설정은 다음과 같이 설정됩니다. 드롭 다운 ID에 추가 된 -input 부분에 유의하세요. 

$('#project-locationSearch-dist-input').val('1');

                <label id="lblDistDDL" for="project-locationSearch-input-dist" title="Select a district to populate SPNs and PIDs or enter a known SPN or PID." class="control-label">District</label>
                <select id="project-locationSearch-dist" data-tabindex="1">
                    <option id="optDistrictOne" value="01">1</option>
                    <option id="optDistrictTwo" value="02">2</option>
                    <option id="optDistrictThree" value="03">3</option>
                    <option id="optDistrictFour" value="04">4</option>
                    <option id="optDistrictFive" value="05">5</option>
                    <option id="optDistrictSix" value="06">6</option>
                    <option id="optDistrictSeven" value="07">7</option>
                    <option id="optDistrictEight" value="08">8</option>
                    <option id="optDistrictNine" value="09">9</option>
                    <option id="optDistrictTen" value="10">10</option>
                    <option id="optDistrictEleven" value="11">11</option>
                    <option id="optDistrictTwelve" value="12">12</option>
                </select>

자동 완성 컨트롤에 대해 알아 낸 또 다른 점은 올바르게 비활성화 / 비우는 방법입니다. 3 개의 컨트롤이 함께 작동하며 그중 2 개는 상호 배타적입니다.

//SPN
spnDDL.combobox({
    select: function (event, ui) {
        var spnVal = spnDDL.val();
        //fire search event
        $('#project-locationSearch-pid-input').val('');
        $('#project-locationSearch-pid-input').prop('disabled', true);
        pidDDL.empty(); //empty the pid list
    }
});
//get the labels so we have their tool tips to hand.
//this way we don't set id values on each label
spnDDL.siblings('label').tooltip();

//PID
pidDDL.combobox({
    select: function (event, ui) {
        var pidVal = pidDDL.val();
        //fire search event
        $('#project-locationSearch-spn-input').val('');
        $('#project-locationSearch-spn-input').prop('disabled', true);
        spnDDL.empty(); //empty the spn list
    }
});

이 중 일부는 게시물의 범위를 벗어 났고 정확히 어디에 넣어야할지 모르겠습니다. 이것은 매우 도움이되고 알아내는 데 시간이 걸리기 때문에 공유되고 있습니다.

Und 또한 ... 이와 같은 컨트롤을 활성화하려면 (비활성화 됨, false) 및 NOT (활성화 됨, true)입니다. :)

게시물 외에도 주목할 다른 사항은 다음과 같습니다.

    /*
Note, when working with the jQuery Autocomplete UI control,
the xxx-input control is a text input created at the time a selection
from the drop down is picked.  Thus, it's created at that point in time
and its value must be picked fresh.  Can't be put into a var and re-used
like the drop down list part of the UI control.  So you get spnDDL.empty()
where spnDDL is a var created like var spnDDL = $('#spnDDL);  But you can't
do this with the input part of the control.  Winded explanation, yes.  That's how
I have to do my notes or 6 months from now I won't know what a short hand note means
at all. :) 
*/
    //district
    $('#project-locationSearch-dist').combobox({
        select: function (event, ui) {
            //enable spn and pid drop downs
            $('#project-locationSearch-pid-input').prop('disabled', false);
            $('#project-locationSearch-spn-input').prop('disabled', false);
            //clear them of old values
            pidDDL.empty();
            spnDDL.empty();
            //get new values
            GetSPNsByDistrict(districtDDL.val());
            GetPIDsByDistrict(districtDDL.val());
        }
    });

즉석에서 이러한 것들을 배우는 데 너무 오래 걸렸기 때문에 모두 공유했습니다. 이것이 도움이되기를 바랍니다.

— user1585204
소스
여기서 주제를 벗어났습니다. 질문은 JQuery의 값에 따라 선택을 변경하는 것입니다. 관련된 UI 요소가 없습니다.
— Mark W
0

드롭 다운 옵션 값을 이름으로 선택할 수 있습니다. 

// deom
jQuery("#option_id").find("option:contains('Monday')").each(function()
{
 if( jQuery(this).text() == 'Monday' )
 {
  jQuery(this).attr("selected","selected");
  }

});
— 하딕
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.