HTML 선택 요소의 선택된 옵션 변경

148

내 HTML <select>에는 세 가지 <option>요소가 있습니다. jQuery를 사용하여 Javascript에 대해 각 옵션의 값을 확인하고 싶습니다 var. 하나가 일치하면 해당 옵션의 선택된 속성을 설정하고 싶습니다. 어떻게해야합니까?

javascript  jquery  html 
— llihttocs
소스
HTML을 게시하십시오. 그러나 일반적인 방법으로 :$('#myselectid').val()
— Samich
9
왜 다운 보트를 받았는지 확실하지 않은 그는 새로운 사용자이며 질문은 합법적입니다.
— vol7ron

답변:

323

바닐라 자바 ​​스크립트

평범한 오래된 JavaScript 사용하기 :

var val = "Fish";
var sel = document.getElementById('sel');
document.getElementById('btn').onclick = function() {
  var opts = sel.options;
  for (var opt, j = 0; opt = opts[j]; j++) {
    if (opt.value == val) {
      sel.selectedIndex = j;
      break;
    }
  }
}
<select id="sel">
    <option>Cat</option>
    <option>Dog</option>
    <option>Fish</option>
</select>
<button id="btn">Select Fish</button>
스 니펫 확장

jQuery

그러나 실제로 jQuery를 사용하려면 다음을 수행하십시오.

var val = 'Fish';
$('#btn').on('click', function() {
  $('#sel').val(val);
});

코드 스 니펫 표시

jQuery-값 속성 사용

옵션에 텍스트 내용과 다른 값 속성이 있고 텍스트 내용을 통해 선택하려는 경우 :

<select id="sel">
    <option value="1">Cat</option>
    <option value="2">Dog</option>
    <option value="3">Fish</option>
</select>
<script>
    var val = 'Fish';
    $('#sel option:contains(' + val + ')').prop({selected: true});
</script>

데모

그러나 위의 설정을하고 jQuery를 사용하여 값으로 선택하려는 경우 이전과 같이 할 수 있습니다.

var val = 3;
$('#sel').val(val);

현대 DOM

지원하는 브라우저 document.querySelector및 HTMLOptionElement::selected속성의 경우이 작업을보다 간결하게 수행 할 수있는 방법입니다.

var val = 3;    
document.querySelector('#sel [value="' + val + '"]').selected = true;

데모

Knockout.js

<select data-bind="value: val">
    <option value="1">Cat</option>
    <option value="2">Dog</option>
    <option value="3">Fish</option>
</select>
<script>
    var viewModel = {
        val: ko.observable()
    };
    ko.applyBindings(viewModel);
    viewModel.val(3);
</script>

데모

고분자

<template id="template" is="dom-bind">
    <select value="{{ val }}">
        <option value="1">Cat</option>
        <option value="2">Dog</option>
        <option value="3">Fish</option>
    </select>
</template>
<script>
    template.val = 3;
</script>

데모

앵귤러 2

참고 : 이것은 최종 안정 릴리스에 대해 업데이트되지 않았습니다.

<app id="app">
    <select [value]="val">
        <option value="1">Cat</option>
        <option value="2">Dog</option>
        <option value="3">Fish</option>
    </select>
</app>
<script>
    var App = ng.Component({selector: 'app'})
        .View({template: app.innerHTML})
        .Class({constructor:  function() {}});

    ng.bootstrap(App).then(function(app) {
        app._hostComponent.instance.val = 3;
    });
</script>

데모

부 2

<div id="app">
    <select v-model="val">
        <option value="1">Cat</option>
        <option value="2">Dog</option>
        <option value="3">Fish</option>
    </select>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
                val: null,
        },
        mounted: function() {
                this.val = 3;
        }
    });
</script>

데모

— 크즈
소스
1
선택한 속성을 설정하는 방법을 잘 모르기 때문에 특히 유용했습니다. selectedIndex가 있다는 것을 몰랐습니다. 감사.
— llihttocs
1
@aelgoa jsperf.com/option-select-loop/2 첫 번째 스 니펫이 내 코드를 더 모방하도록 수정하여 속도가 느려졌습니다. 사전 증분 대신 사후 증분을 사용한 다음 세 번째 시험보다 약간 빠른 다른 시험을 추가했습니다.
— kzh
1
가학 적으로 :document.evaluate(".//select[@id='sel']/option[text()='Fish']", document.body, null, 9, null).singleNodeValue.selected = true;
— kzh
1
@llihttocs 지금은 어떻습니까?
— kzh
1
바닐라 자바 스크립트를 포함하여 주셔서 감사합니다 - :) 자신을 위해 코드를 좋아하는 사람들을 위해
— 피터 쿨렌
24

여기에 jquery를 사용하는 예제는 값이 변경되었지만 첫 번째 항목을 표시하는 선택을 그대로 두므로 실제로 올바른 것은 없습니다.

알래스카를 선택하고 올바른 항목을 선택하여 올바른 항목을 표시하도록하려면 다음을 사용하십시오.

<select id="state">
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
</select>

jquery를 사용하면 다음과 같습니다.

$('#state').val('AK').change();
— 저스틴 버스터
소스
19

JavaScript를 사용하여 select 요소의 값을 변경하여 선택한 옵션을 해당 값이있는 옵션으로 변경할 수 있습니다.

document.getElementById('sel').value = 'bike';​​​​​​​​​​

데모

— 이빈 라즈
소스
1
타이밍 때문에 예제가 제대로 작동하지 않습니다. 사용자가 버튼을 클릭 할 때까지 기다리도록 업데이트했습니다. jsfiddle.net/xkqTR/3271
— dlaliberte
이것은 select 요소에서 change 이벤트를 발생시키지 않습니다. 그것에 대한 해결책이 있습니까?
— DragonKnight
10

마크 업

<select id="my_select">
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
</select>

jQuery

var my_value = 2;
$('#my_select option').each(function(){
    var $this = $(this); // cache this jQuery object to avoid overhead

    if ($this.val() == my_value) { // if this option's value is equal to our value
        $this.prop('selected', true); // select this option
        return false; // break the loop, no need to look further
    }
});

데모

— 선반
소스
나는 이것이 내가 꼭 필요한 것이라고 생각합니다. 이미 여러 줄의 코드를 사용했으며 작동하는 것 같습니다. 훌륭한 스 니펫에 감사드립니다.
— llihttocs
@ llihttocs : 다행입니다. 답변 왼쪽 상단의 투표 수 아래에있는 빈 눈금을 클릭하여 문제를 해결하는 답변을 자유롭게 수락하십시오. 따라서이 질문은 해결 된 것으로 표시되고 동일한 솔루션을 찾는 다른 사람들이 쉽게 답을 찾을 수 있습니다.
— Shef
4

select 요소의 선택된 옵션의 value & textContent (우리가 보는 것)를 'Mango'로 변경하고 싶습니다.

가장 간단한 코드는 다음과 같습니다.

var newValue1 = 'Mango'

var selectElement = document.getElementById('myselectid');
selectElement.options[selectElement.selectedIndex].value = newValue1;
selectElement.options[selectElement.selectedIndex].textContent = newValue1;

누군가에게 도움이되기를 바랍니다. 행운을 빕니다.
도움이 되었으면 투표하십시오.

— 마노 하르 레디 포로 디
소스
2

이 데모를 테스트

  1. 값을 기준으로 옵션 선택

    var vals = [2,'c'];

$('option').each(function(){
   var $t = $(this);

   for (var n=vals.length; n--; )
      if ($t.val() == vals[n]){
         $t.prop('selected', true);
         return;
      }
});

  2. 텍스트를 기반으로 옵션 선택

    var vals = ['Two','CCC'];                   // what we're looking for is different

$('option').each(function(){
   var $t = $(this);

   for (var n=vals.length; n--; )
      if ($t.text() == vals[n]){            // method used is different
         $t.prop('selected', true);
         return;
      }
});

HTML 지원

<select>
   <option value=""></option>
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
</select>

<select>
   <option value=""></option>
   <option value="a">AAA</option>
   <option value="b">BBB</option>
   <option value="c">CCC</option>
</select>
— vol7ron
소스
1
이 예제는 매우 유용합니다. 옵션을 반복하고 선택한 속성을 설정하는 방법을 모르겠습니다. 완전한 답변을 주셔서 감사합니다.
— llihttocs
문제가 없습니다. 도움이되는 질문 / 의견 옆에있는 위쪽 화살표를 클릭하십시오. 선택한 답변 옆의 확인 표시를 선택하십시오. - 그것은 당신에게 아무것도 비용이 O를 당신은 승 / 중 할 수있는
— vol7ron
1

탁월한 답변-다음을 찾는 사람을위한 D3 버전이 있습니다.

<select id="sel">
    <option>Cat</option>
    <option>Dog</option>
    <option>Fish</option>
</select>
<script>
    d3.select('#sel').property('value', 'Fish');
</script>
— 트리스탄 리드
소스
1

나는 여기에 게시 된 거의 모든 답변을 사용했지만 그에 익숙하지 않으므로 한 걸음 더 깊이 파고 내 필요에 맞는 쉬운 솔루션을 찾았고 여러분과 공유 할 가치가 있다고 생각했습니다.
모든 옵션을 반복하거나 JQuery 를 사용하는 대신 간단한 단계로 핵심 JS 를 사용할 수 있습니다 .

예

<select id="org_list">
  <option value="23">IBM</option>
  <option value="33">DELL</option>
  <option value="25">SONY</option>
  <option value="29">HP</option>
</select>

따라서 선택할 옵션의 값을 알아야합니다.

function selectOrganization(id){
    org_list=document.getElementById('org_list');
    org_list.selectedIndex=org_list.querySelector('option[value="'+id+'"]').index;
}

사용하는 방법?

selectOrganization(25); //this will select SONY from option List

귀하의 의견을 환영합니다. :) AzmatHunzai.

— 아즈 마트 카림 칸
소스
1

검색을 많이 한 후에 속성이 option아닌 내부 텍스트 만 알고있는 선택 목록에서 @kzh를 시도했지만 value선택 답변을 기반으로 한이 코드 url는이 형식의 현재 페이지 에 따라 선택 옵션을 변경하는 데 사용 되었습니다 http://www.example.com/index.php?u=Steve

<select id="sel">
    <option>Joe</option>
    <option>Steve</option>
    <option>Jack</option>
</select>
<script>
    var val = window.location.href.split('u=')[1]; // to filter ?u= query 
    var sel = document.getElementById('sel');
    var opts = sel.options;
    for(var opt, j = 0; opt = opts[j]; j++) {
        // search are based on text inside option Attr
        if(opt.text == val) {
            sel.selectedIndex = j;
            break;
        }
    }
</script>

이렇게하면 url매개 변수가 선택된 상태로 유지 되어보다 사용자에게 친숙해지며 방문자는 현재보고있는 페이지 나 프로필을 알 수 있습니다.

— 살렘
소스
0

레지스터를 업데이트 한 후 이것을 사용하고 ajax를 통해 요청 상태를 변경 한 다음 동일한 스크립트에서 새 상태로 쿼리를 수행하고 select 태그 요소 new state에 넣어보기를 업데이트합니다.

var objSel = document.getElementById("selectObj");
objSel.selectedIndex = elementSelected;

이것이 유용하기를 바랍니다.

— 사용자
소스
-1

약간 깔끔한 바닐라 .JS 버전. 이미 nodeList누락을 수정했다고 가정하면 .forEach():

NodeList.prototype.forEach = Array.prototype.forEach

다만:

var requiredValue = 'i-50332a31',   
  selectBox = document.querySelector('select')

selectBox.childNodes.forEach(function(element, index){
  if ( element.value === requiredValue ) {
    selectBox.selectedIndex = index
  }
})
— 미케 마카 나
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.