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

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

---

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

나는 가지고있다

<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로 어떻게 할 수 있습니까?

---

당신은 사용해야합니다

$('#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>

---

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

선택적으로

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

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

라이브 데모

---

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

---

사용하기 쉬운이 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>

---

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

$('#select_id').val('fg')

---

$('#mySelect').val('ab').change();

---

귀하의 경우 $("#mySelect").val("fg"):)

---

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

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

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

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

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

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

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

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

---

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

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

---

드롭 다운 목록 값이 이미 하드 코딩 된 다른 상황이 있습니다. 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
    }
});

Some of this is beyond the scope of the post and I don't know where to put it exactly. Since this is very helpful and took some time to figure out, it's being shared.

Und Also ... to enable a control like this, it's (disabled, false) and NOT (enabled, true) -- that also took a bit of time to figure out. :)

The only other thing to note, much in addition to the post, is:

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

All shared because it took too long to learn these things on the fly. Hope this is helpful.

---

$('#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>

---

$('select#myselect option[value="ab"]').

참고URL : https://stackoverflow.com/questions/8743975/jquery-how-to-select-dropdown-item-based-on-value