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');...........

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

 // or

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

사용하기 쉬운 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("fg"):)

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

두 가지 옵션을 사용할 수 있습니다.

인덱스 값을 기준으로 할당하려는 경우의 결과입니다. 여기서 '0'은 인덱스입니다.

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

'attrr'은 최신 jquery에서 사용되지 않으므로 사용하지 마십시오.

옵션 값을 기준으로 선택하려면 다음을 선택합니다.

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

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

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

이 코드는 나에게 효과가 있었습니다.

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

드롭다운 목록 값이 이미 하드 코딩되어 있는 다른 상황이 있습니다.구역이 12개뿐이므로 jQueryAutocomplete 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
    }
});

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

또한 이러한 컨트롤을 활성화하려면 (비활성화됨, 거짓) 및 NOT(활성화됨, 참)가 필요합니다. 이 또한 파악하는 데 약간의 시간이 걸렸습니다. :)

게시물 외에도 주의할 점은 다음과 같습니다.

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

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

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

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

});

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

둘 중 하나를 선택한 옵션 값을 가져오는 데 사용할 수 있습니다.

$('#dropdownID').on('change', function () {
        var dropdownselected=$("#dropdownID option:selected").val();
        });
     
     or 
     
     $('#dropdownID').on('change', function () {
        var dropdownselected=this.selectedOptions[0].value;
     });

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