jQuery의 SELECT 요소에서 특정 옵션을 어떻게 선택합니까?

jQuery의 SELECT 요소에서 특정 옵션을 어떻게 선택합니까?

---

색인, 값 또는 텍스트를 알고있는 경우. 직접 참조 할 수있는 ID가없는 경우에도 마찬가지입니다.

이것 , 이것 그리고 이것은 모두 유용한 답변입니다.

마크 업 예

<div class="selDiv">
  <select class="opts">
    <option selected value="DEFAULT">Default</option>
    <option value="SEL1">Selection 1</option>
    <option value="SEL2">Selection 2</option>
  </select>
</div>

---

중간 옵션 요소를 값으로 가져 오는 선택기는 다음과 같습니다.

$('.selDiv option[value="SEL1"]')

색인의 경우 :

$('.selDiv option:eq(1)')

알려진 텍스트의 경우 :

$('.selDiv option:contains("Selection 1")')

편집 : 위에 언급했듯이 OP는 드롭 다운의 선택한 항목을 변경 한 후 일 수 있습니다. 버전 1.6 이상에서는 prop () 메서드가 권장됩니다.

$('.selDiv option:eq(1)').prop('selected', true)

이전 버전 :

$('.selDiv option:eq(1)').attr('selected', 'selected')

EDIT2 : Ryan의 의견 후. "선택 10"에 대한 일치는 원하지 않을 수 있습니다. 전체 텍스트와 일치하는 선택기 를 찾지 못했지만 필터가 작동합니다.

 $('.selDiv option')
    .filter(function(i, e) { return $(e).text() == "Selection 1"})

EDIT3 : $(e).text()비교를 실패하게 만드는 개행 문자를 포함 할 수 있으므로 주의하십시오 . 이는 옵션이 암시 적으로 닫혀있을 때 발생합니다 ( </option>태그 없음 ).

<select ...>
<option value="1">Selection 1
<option value="2">Selection 2
   :
</select>

e.text후행 줄 바꿈과 같은 여분의 공백을 사용 하면 제거되어 비교가 더 강력 해집니다.

---

위의 방법 중 어느 것도 필요한 솔루션을 제공하지 않았기 때문에 저에게 효과가있는 것을 제공 할 것이라고 생각했습니다.

$('#element option[value="no"]').attr("selected", "selected");

---

val()방법을 사용할 수 있습니다 .

$('select').val('the_value');

---

가치에 따라 jQuery 1.7 에서 나를 위해 일한 것은 아래 코드였습니다.

$('#id option[value=theOptionValue]').prop('selected', 'selected').change();

---

이 작업을 수행하는 방법에는 여러 가지가 있지만 .NET에 대한 상위 답변과 많은 논쟁 중에서 가장 깨끗한 접근 방식을 잃었습니다 val(). 또한 일부 메소드는 jQuery 1.6에서 변경되었으므로 업데이트가 필요합니다.

다음 예에서는 변수 $select가 <select>다음을 통해 원하는 태그를 가리키는 jQuery 객체 라고 가정합니다 .

var $select = $('.selDiv .opts');

참고 1-값 일치에 val () 사용 :

값 일치의 경우 https://jsfiddle.net/yz7tu49b/6/val() 속성 선택기를 사용하는 것보다 훨씬 간단합니다.

$select.val("SEL2");

의 setter 버전은 동일한 일치 속성을 설정하여 태그에 .val()구현 되므로 모든 최신 브라우저에서 잘 작동합니다.selectselectedoptionvalue

참고 2-사용 prop ( 'selected', true) :

옵션의 선택된 상태를 직접 설정하려면 매개 변수 (텍스트 값 대신 )와 함께 사용할 수 있습니다 prop(아님 ).attrbooleanselected

예 : https://jsfiddle.net/yz7tu49b/

$option.prop('selected', true);  // Will add selected="selected" to the tag

Note 3 - allow for unknown values:

If you use val() to select an <option>, but the val is not matched (might happen depending on the source of the values), then "nothing" is selected and $select.val() will return null.

So, for the example shown, and for the sake of robustness, you could use something like this https://jsfiddle.net/1250Ldqn/:

var $select = $('.selDiv .opts');
$select.val("SEL2");
if ($select.val() == null) {
  $select.val("DEFAULT");
}

Note 4 - exact text match:

If you want to match by exact text, you can use a filter with function. e.g. https://jsfiddle.net/yz7tu49b/2/:

var $select = $('.selDiv .opts');
$select.children().filter(function(){
    return this.text == "Selection 2";
}).prop('selected', true);

although if you may have extra whitespace you may want to add a trim to the check as in

    return $.trim(this.text) == "some value to match";

Note 5 - match by index

If you want to match by index just index the children of the select e.g. https://jsfiddle.net/yz7tu49b/3/

var $select = $('.selDiv .opts');
var index = 2;
$select.children()[index].selected = true;

Although I tend to avoid direct DOM properties in favour of jQuery nowadays, to future-proof code, so that could also be done as https://jsfiddle.net/yz7tu49b/5/:

var $select = $('.selDiv .opts');
var index = 2;
$select.children().eq(index).prop('selected', true);

Note 6 - use change() to fire the new selection

In all the above cases, the change event does not fire. This is by design so that you do not wind up with recursive change events.

To generate the change event, if required, just add a call to .change() to the jQuery select object. e.g. the very first simplest example becomes https://jsfiddle.net/yz7tu49b/7/

var $select = $('.selDiv .opts');
$select.val("SEL2").change();

There are also plenty of other ways to find the elements using attribute selectors, like [value="SEL2"], but you have to remember attribute selectors are relatively slow compared to all these other options.

---

You could name the select and use this:

$("select[name='theNameYouChose']").find("option[value='theValueYouWantSelected']").attr("selected",true);

It should select the option you want.

---

   $(elem).find('option[value="' + value + '"]').attr("selected", "selected");

---

Answering my own question for documentation. I'm sure there are other ways to accomplish this, but this works and this code is tested.

<html>
<head>
<script language="Javascript" src="javascript/jquery-1.2.6.min.js"></script>
<script type="text/JavaScript">

$(function() {
    $(".update").bind("click",      // bind the click event to a div
        function() {
            var selectOption = $('.selDiv').children('.opts') ;
            var _this = $(this).next().children(".opts") ;

            $(selectOption).find("option[index='0']").attr("selected","selected");
//          $(selectOption).find("option[value='DEFAULT']").attr("selected","selected");
//          $(selectOption).find("option[text='Default']").attr("selected","selected");


//          $(_this).find("option[value='DEFAULT']").attr("selected","selected");
//          $(_this).find("option[text='Default']").attr("selected","selected");
//          $(_this).find("option[index='0']").attr("selected","selected");

    }); // END Bind
}); // End eventlistener

</script>
</head>
<body>
<div class="update" style="height:50px; color:blue; cursor:pointer;">Update</div>
<div class="selDiv">
        <select class="opts">
            <option selected value="DEFAULT">Default</option>
            <option value="SEL1">Selection 1</option>
            <option value="SEL2">Selection 2</option>
        </select>
    </div>
</body>
</html>

---

Using jquery-2.1.4, I found the following answer to work for me:

$('#MySelectionBox').val(123).change();

If you have a string value try the following:

$('#MySelectionBox').val("extra thing").change();

Other examples did not work for me so that's why I'm adding this answer.

I found the original answer at: https://forum.jquery.com/topic/how-to-dynamically-select-option-in-dropdown-menu

---

For setting select value with triggering selected:

$('select.opts').val('SEL1').change();

---

For setting option from a scope:

$('.selDiv option[value="SEL1"]')
    .attr('selected', 'selected')
    .change();

This code use selector to find out the select object with condition, then change the selected attribute by attr().

---

Futher, I recommend to add change() event after setting attribute to selected, by doing this the code will close to changing select by user.

---

I use this, when i know the index of the list.

$("#yourlist :nth(1)").prop("selected","selected").change();

This allows the list to change, and fire the change event. The ":nth(n)" is counting from index 0

---

try this new one

Exactly it will works

<script>    
    $(document).ready(function() {
    $("#id").val('select value here');
       });
        </script>

---

i'll go with:-

$("select#my-select option") .each(function() { this.selected = (this.text == myVal); });

---

Try this

you just use select field id instead of #id (ie.#select_name)

instead of option value use your select option value

 <script>
    $(document).ready(function() {
$("#id option[value='option value']").attr('selected',true);
   });
    </script>

---

For Jquery chosen if you send the attribute to function and need to update-select option

$('#yourElement option[value="'+yourValue+'"]').attr('selected', 'selected');
$('#editLocationCity').chosen().change();
$('#editLocationCity').trigger('liszt:updated');

---

/* This will reset your select box with "-- Please Select --"   */ 
    <script>
    $(document).ready(function() {
        $("#gate option[value='']").prop('selected', true);
    });
    </script>

---

The $('select').val('the_value'); looks the right solution and if you have data table rows then:

$row.find('#component').val('All');

---

if you want to not use jQuery, you can use below code:

document.getElementById("mySelect").selectedIndex = "2";

---

Thanks for the question. Hope this piece of code will work for you.

var val = $("select.opts:visible option:selected ").val();

---

$('#select option[data-id-estado="3"]').prop("selected",true).trigger("change");

or

$('#select option[value="myValue"]').prop("selected",true).trigger("change");

참고URL : https://stackoverflow.com/questions/314636/how-do-you-select-a-particular-option-in-a-select-element-in-jquery