반응형
HTML 선택 요소의 선택한 옵션 변경
에는 HTML 있습니다.<select><option>요소들. 하여 자바스크립트 jQuery와 대조하여각 .var경우 옵션의 합니다. 일치하는 경우 해당 옵션의 선택된 속성을 설정합니다.제가 어떻게 하죠?
바닐라 자바스크립트
오래된 일반 자바스크립트 사용하기:
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);
});
var val = 'Fish';
$('#btn').on('click', function() {
$('#sel').val(val);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="sel">
<option>Cat</option>
<option>Dog</option>
<option>Fish</option>
</select>
<button id="btn">Select Fish</button>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
를 지원하는 브라우저 및 속성의 경우 이 작업을 수행하는 보다 간단한 방법입니다.
var val = 3;
document.querySelector('#sel [value="' + val + '"]').selected = true;
데모
녹아웃.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>
데모
여기서 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();
선택 요소의 값을 변경할 수 있습니다. 선택 요소의 값은 다음과 같이 JavaScript를 사용하여 선택한 옵션을 해당 값을 가진 옵션으로 변경할 수 있습니다.
document.getElementById('sel').value = 'bike';
마크업
<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
}
});
데모
선택한 요소의 값 & textContent(보는 내용)을 모두 '망고'로 변경하고 싶습니다.
작동한 가장 간단한 코드는 다음과 같습니다.
var newValue1 = 'Mango'
var selectElement = document.getElementById('myselectid');
selectElement.options[selectElement.selectedIndex].value = newValue1;
selectElement.options[selectElement.selectedIndex].textContent = newValue1;
저는 여기에 게시된 거의 모든 답변을 사용했지만 이에 대해 불편함을 느껴 한 걸음 더 나아가 제 요구에 부합하고 여러분과 공유할 가치가 있는 쉬운 해결책을 찾았습니다.
옵션 전체를 반복하거나 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
당신의 의견을 환영합니다.:) 아즈마트 훈자이.
해당 값을 기준으로 옵션 선택
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; } });텍스트를 기준으로 Option(Option)
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>
훌륭한 답변 - 다음을 찾는 모든 사람을 위한 D3 버전을 소개합니다.
<select id="sel">
<option>Cat</option>
<option>Dog</option>
<option>Fish</option>
</select>
<script>
d3.select('#sel').property('value', 'Fish');
</script>
많은 검색 끝에 내가 아는 리스트만 골라 @kzh를 시도했습니다.option내부 텍스트 notvalue속성, 이 코드는 선택 답변을 기반으로 합니다. 현재 페이지에 따라 선택 옵션을 변경할 때 사용했습니다.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매개변수를 선택한 것으로 표시하여 사용자에게 보다 친숙하게 만들고 방문자는 현재 어떤 페이지나 프로필을 보고 있는지 알 수 있습니다.
그냥 코드만 쓰면 됩니다.
var theVal = 1;
$('#variable_id').val(theVal).trigger('change');
레지스터 업데이트 후 이것을 사용하고 ajax를 통해 요청 상태를 변경한 후 동일한 스크립트에서 새로운 상태로 쿼리를 수행하고 select tag element new state에 넣어 뷰를 업데이트합니다.
var objSel = document.getElementById("selectObj");
objSel.selectedIndex = elementSelected;
이것이 유용했으면 좋겠습니다.
selectElementhtml 입니다.<select>요소.
값을 증가시킵니다.
selectElement.selectedIndex++
값을 감소시킵니다.
selectElement.selectedIndex--
var accHos = document.getElementById("accHos");
function showName(obj) {
accHos.selectedIndex = obj.selectedIndex;
}div {
color: coral;
}
select {
margin-left: 20px;
margin-bottom: 8px;
min-width: 120px;
}<div>Select Account Number:</div>
<select id="accNos" name="" onchange="showName(this);">
<option value="">Select Account</option>
<option value="">1052021</option>
<option value="">2052021</option>
<option value="">3052021</option>
<option value="">4052021</option>
<option value="">5052021</option>
</select>
<div>Account Holder Name:</div>
<select id="accHos" name="" disabled>
<option value="">--Name--</option>
<option value="">Suhan</option>
<option value="">Cesur</option>
<option value="">Hopper</option>
<option value="">Rachel</option>
<option value="">Arya</option>
</select>
<!-- Just for my referece -->바닐라가 약간 더 가깝습니다.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
}
})
언급URL : https://stackoverflow.com/questions/7373058/changing-the-selected-option-of-an-html-select-element
반응형
'programing' 카테고리의 다른 글
| AJAX(jQuery)가 로드된 날짜의 디브 내부 무한 스크롤 (0) | 2023.09.14 |
|---|---|
| 추가 열을 선택할 때 MariaDB에서 SQL 응답 속도가 느립니다. (0) | 2023.09.14 |
| Word에서 메뉴 활성화하기 3개 테마 누르기 (0) | 2023.09.14 |
| 사용자를 구문 분석하는 데 기본 제공되는 도우미입니다.신원.도메인에 이름을 지정합니다.사용자 이름 (0) | 2023.09.14 |
| 인증된 사용자의 역할 저장/할당 (0) | 2023.09.14 |