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: 라이언의 발언 이후.선택 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();

이를 위한 여러 가지 방법이 있지만, 가장 깨끗한 접근법은 상위 답변과 수많은 논쟁 중에서 사라졌습니다.val()또한 jQuery 1.6에서 일부 메서드가 변경되어 업데이트가 필요합니다.

다음 예제에서는 변수를 가정합니다.$select원하는 위치를 가리키는 jQuery 개체입니다.<select>태그(예: 다음을 통해):

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

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

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

$select.val("SEL2");

의 세터 버전.val()에 구현됨select태그를 설정하여selected일치하는 성질option마찬가지로value그래서 모든 최신 브라우저에서 잘 작동합니다.

참고 2 - 소품 사용('선택됨', true)

옵션의 선택된 상태를 직접 설정하려면 다음을 사용할 수 있습니다.prop(아닙니다.attr)와 함께boolean매개 변수(텍스트 값이 아닌)selected):

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

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

참고 3 - 알 수 없는 값을 허용합니다.

사용하는 경우val()선택하기 위해<option>그러나 값이 일치하지 않습니다(값의 소스에 따라 발생하는 경우가 있습니다). 그러면 "아무것도"가 선택되고$select.val()돌아올 것입니다null.

따라서 다음과 같은 https://jsfiddle.net/1250Ldqn/ 을 사용하여 견고성을 확보할 수 있습니다.

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

참고 4 - 정확한 텍스트 일치:

시키려면 정한텍로일려다사수있다습니용할음을면치키시를 하면 됩니다.filter기능 포함(예: https://jsfiddle.net/yz7tu49b/2/ :

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

그러나 만약 당신이 여분의 빈 공간을 가지고 있다면 당신은 체크에 트림을 추가하고 싶을 것입니다.

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

참고 5 - 색인별 일치

색인으로 일치시키려면 선택한 하위 항목을 색인화하십시오(예: https://jsfiddle.net/yz7tu49b/3/ )

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

요즘에는 jQuery를 선호하는 직접 DOM 속성을 피하는 경향이 있지만, 미래에 대비한 코드로, https://jsfiddle.net/yz7tu49b/5/ 로도 수행할 수 있습니다.

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

참고 6 - 변경()을 사용하여 새 선택 항목을 실행합니다.

위의 모든 경우 변경 이벤트가 실행되지 않습니다.이는 반복적인 변경 이벤트가 발생하지 않도록 설계된 것입니다.

변경 이벤트를 생성하려면 필요한 경우 다음에 호출을 추가합니다..change() jQuery »select오브젝트(예: 가장 간단한 예는 https://jsfiddle.net/yz7tu49b/7/ 가 됩니다.

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

또한 속성 선택기를 사용하여 요소를 찾는 많은 다른 방법들이 있습니다.[value="SEL2"]그러나 속성 선택기는 다른 모든 옵션에 비해 상대적으로 느립니다.

jquery-2.1.4를 사용하여 다음과 같은 답변을 얻었습니다.

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

문자열 값이 있는 경우 다음을 수행합니다.

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

다른 예시들은 저에게 효과가 없었기 때문에 제가 이 답변을 추가하는 이유입니다.

저는 원래 답을 https://forum.jquery.com/topic/how-to-dynamically-select-option-in-dropdown-menu 에서 찾았습니다.

정확히 작동할 것입니다. 아래 방법을 사용해 보십시오.

일반적인 경우 옵션 선택

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

선택 2 옵션의 경우 트리거 옵션을 사용해야 합니다.

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

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

선택 항목의 이름을 지정하고 다음을 사용할 수 있습니다.

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

원하는 옵션을 선택해야 합니다.

문서 작성을 위해 제 질문에 답하는 중입니다.다른 방법도 있겠지만, 이 방법은 작동하고 이 코드는 테스트됩니다.

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

트리거링을 선택한 상태에서 값을 선택합니다.

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

---

스코프에서 옵션을 설정하는 경우:

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

condition을 합니다.attr().

---

또한추가것추다니천합을는하다니▁add추▁fut합▁recommend천▁to▁i를 추가하는 것을 추천합니다.change()을 성설 후이벤으로 한 후 selected이렇게 하면 코드가 사용자별 선택을 변경할 수 있습니다.

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

사용해 보세요.

#id(즉, #id) 대신 select field id(필드 ID 선택)를 사용합니다.#select_name)

옵션 값 대신 선택 옵션 값 사용

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

저는 목록의 색인을 알고 있을 때 이것을 사용합니다.

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

이를 통해 목록을 변경하고 변경 이벤트를 실행할 수 있습니다.":nth(n)"가 인덱스 0에서 카운트됩니다.

제가 할게요:-

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

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

속성을 함수로 보내고 업데이트해야 하는 경우 선택한 Jquery의 경우 옵션을 선택합니다.

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

jQuery를 사용하지 않으려면 아래 코드를 사용할 수 있습니다.

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

그$('select').val('the_value');에서는 올바른 솔루션을 찾고 데이터 테이블 행이 있는 경우 다음을 수행합니다.

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

질문 감사합니다.이 코드가 당신에게 효과가 있기를 바랍니다.

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

사용해야 하는 몇 가지 제안이 있습니다.prop에 attr. 꼭사하요를 하세요.prop그리고 내가 둘 다 테스트했듯이.attr가장 간단한 경우를 제외하고는 이상한 결과를 얻을 수 있습니다.

임의로 그룹화된 솔루션 중에서 선택할 수 있는 솔루션이 필요했습니다.select으로 다른 옵션을 했습니다.select같은 페이지에 입력합니다.예를 들어, 두 개의 드롭다운이 있다고 가정하면 하나는 국가를 위한 드롭다운이고 다른 하나는 대륙을 위한 드롭다운입니다.이 시나리오에서 국가를 선택하면 자동으로 다른 대륙의 드롭다운 목록에서 해당 국가의 대륙이 선택됩니다.

$("#country").on("change", function() {
  //get continent
  var originLocationRegion = $(this).find(":selected").data("origin-region");

  //select continent correctly with prop
  $('#continent option[value="' + originLocationRegion + '"]').prop('selected', true);
});



$("#country2").on("change", function() {
  //get continent
  var originLocationRegion = $(this).find(":selected").data("origin-region");

  //select continent wrongly with attr
  $('#continent2 option[value="' + originLocationRegion + '"]').attr('selected', true);
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <form>
    <h4 class="text-success">Props to the good stuff ;) </h4>
    <div class="form-row">
      <div class="form-group col-md-6 col-sm-6">
        <label>Conuntries</label>
        <select class="custom-select country" id="country">
          <option disabled selected>Select Country </option>
          <option data-origin-region="Asia" value="Afghanistan">Afghanistan</option>
          <option data-origin-region="Antartica" value="Antartica">Antartica</option>
          <option data-origin-region="Australia" value="Australia">Australia</option>
          <option data-origin-region="Europe" value="Austria">Austria</option>
          <option data-origin-region="Asia" value="Bangladesh">Bangladesh</option>
          <option data-origin-region="South America" value="Brazil">Brazil</option>
          <option data-origin-region="Africa" value="Cameroon">Cameroon</option>
          <option data-origin-region="North America" value="Canada">Canada</option>
          <option data-origin-region="South America" value="Chile">Chile</option>
          <option data-origin-region="Asia" value="China">China</option>
          <option data-origin-region="South America" value="Ecuador">Ecuador</option>
          <option data-origin-region="Australia" value="Fiji">Fiji</option>
          <option data-origin-region="North America" value="Mexico">Mexico</option>
          <option data-origin-region="Australia" value="New Zealand">New Zealand</option>
          <option data-origin-region="Africa" value="Nigeria">Nigeria</option>
          <option data-origin-region="Europe" value="Portugal">Portugal</option>
          <option data-origin-region="Africa" value="Seychelles">Seychelles</option>
          <option data-origin-region="North America" value="United States">United States</option>
          <option data-origin-region="Europe" value="United Kingdom">United Kingdom</option>
        </select>
      </div>
      <div class="form-group col-md-6 col-sm-6">
        <label>Continent</label>
        <select class="custom-select" id="continent">
          <option disabled selected>Select Continent</option>
          <option disabled value="Africa">Africa</option>
          <option disabled value="Antartica">Antartica</option>
          <option disabled value="Asia">Asia</option>
          <option disabled value="Europe">Europe</option>
          <option disabled value="North America">North America</option>
          <option disabled value="Australia">Australia</option>
          <option disabled value="South America">South America</option>
        </select>
      </div>
    </div>
  </form>
  <hr>

  <form>
    <h4 class="text-danger"> Attributing the bad stuff to attr </h4>
    <div class="form-row">
      <div class="form-group col-md-6 col-sm-6">
        <label>Conuntries</label>
        <select class="custom-select country-2" id="country2">
          <option disabled selected>Select Country </option>
          <option data-origin-region="Asia" value="Afghanistan">Afghanistan</option>
          <option data-origin-region="Antartica" value="Antartica">Antartica</option>
          <option data-origin-region="Australia" value="Australia">Australia</option>
          <option data-origin-region="Europe" value="Austria">Austria</option>
          <option data-origin-region="Asia" value="Bangladesh">Bangladesh</option>
          <option data-origin-region="South America" value="Brazil">Brazil</option>
          <option data-origin-region="Africa" value="Cameroon">Cameroon</option>
          <option data-origin-region="North America" value="Canada">Canada</option>
          <option data-origin-region="South America" value="Chile">Chile</option>
          <option data-origin-region="Asia" value="China">China</option>
          <option data-origin-region="South America" value="Ecuador">Ecuador</option>
          <option data-origin-region="Australia" value="Fiji">Fiji</option>
          <option data-origin-region="North America" value="Mexico">Mexico</option>
          <option data-origin-region="Australia" value="New Zealand">New Zealand</option>
          <option data-origin-region="Africa" value="Nigeria">Nigeria</option>
          <option data-origin-region="Europe" value="Portugal">Portugal</option>
          <option data-origin-region="Africa" value="Seychelles">Seychelles</option>
          <option data-origin-region="North America" value="United States">United States</option>
          <option data-origin-region="Europe" value="United Kingdom">United Kingdom</option>
        </select>
      </div>
      <div class="form-group col-md-6 col-sm-6">
        <label>Continent</label>
        <select class="custom-select" id="continent2">
          <option disabled selected>Select Continent</option>
          <option disabled value="Africa">Africa</option>
          <option disabled value="Antartica">Antartica</option>
          <option disabled value="Asia">Asia</option>
          <option disabled value="Europe">Europe</option>
          <option disabled value="North America">North America</option>
          <option disabled value="Australia">Australia</option>
          <option disabled value="South America">South America</option>
        </select>
      </div>
    </div>
  </form>
</div>

에서 볼 수 , 코드스니볼수있이듯서,prop매번 올바르게 작동하지만attr옵션을 한 번 선택한 후에는 제대로 선택할 수 없습니다.

키포인트:우리는 보통 속성에 관심이 있기 때문에 더 안전하게 사용할 수 있습니다.prop1파운드가 attr대개의 경우에

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