값으로 선택 옵션 '선택됨'설정
select몇 가지 옵션 이있는 필드가 있습니다. 이제 optionsjQuery로 그중 하나를 선택해야합니다 . 그러나 선택해야하는 value중 하나만 알 때 어떻게 할 수 option있습니까?
다음 HTML이 있습니다.
<div class="id_100">
<select>
<option value="val1">Val 1</option>
<option value="val2">Val 2</option>
<option value="val3">Val 3</option>
</select>
</div>
값 옵션을 선택해야합니다 val2. 어떻게 할 수 있습니까?
다음은 페이지입니다. http://jsfiddle.net/9Stxb/
옵션 태그로 필요한 경우 더 쉬운 방법이 있습니다.
$("div.id_100 select").val("val2");
이 jQuery 메서드를 확인하십시오 .
값이 'val2'인 옵션을 선택 선택 :
$('.id_100 option[value=val2]').attr('selected','selected');
change()값을 선택한 후 이벤트를 사용하십시오 . 문서에서 :
내용이 변경되지 않고 필드가 포커스를 잃으면 이벤트가 트리거되지 않습니다. 이벤트를 수동으로 비용 청구
.change()인수없이 적용하십시오 .
$("#select_id").val("val2").change();
자세한 내용은 .change ()에 있습니다.
먼저 모두 선택을 취소하고 선택 가능한 옵션을 필터링합니다.
$('.id_100 option')
.removeAttr('selected')
.filter('[value=val1]')
.attr('selected', true)
<select name="contribution_status_id" id="contribution_status_id" class="form-select">
<option value="1">Completed</option>
<option value="2">Pending</option>
<option value="3">Cancelled</option>
<option value="4">Failed</option>
<option value="5">In Progress</option>
<option value="6">Overdue</option>
<option value="7">Refunded</option>
값으로 보류 상태로 설정
$('#contribution_status_id').val("2");
나를 위해 다음 작업을 수행했습니다.
$("div.id_100").val("val2").change();
가장 쉬운 방법은 val () 설정을 선택하는 것을 선택하는 생각하지만 다음을 확인할 수 있습니다. jQuery에서 선택 및 옵션 태그를 처리하는 방법을 참조하십시오 . 대한 자세한 내용은
$('div.id_100 option[value="val2"]').prop("selected", true);
$('id_100').val('val2');
어떤 경우에 유용합니다.
$('.id_100 option').each(function() {
if($(this).val() == 'val2') {
$(this).prop("selected", true);
}
});
속성 선택기를 사용하여 모든 속성과 해당 값 [attributename=optionalvalue]을 선택할 수 있습니다.
$("div.id_100 > select > option[value=" + value + "]").prop("selected",true);
value선택하려는 값은 어디에 있습니까?
여러 번 사용되는 경우처럼 이전에 선택한 값을 제거해야하는 경우 먼저 선택한 속성을 제거하기 위해 약간 필요합니다.
$("div.id_100 option:selected").prop("selected",false);
$("div.id_100 option[value=" + value + "]")
.prop("selected",true);
간단한 대답은 html입니다.
<select name="ukuran" id="idUkuran">
<option value="1000">pilih ukuran</option>
<option value="11">M</option>
<option value="12">L</option>
<option value="13">XL</option>
</select>
jquery에서 버튼 또는 무엇이든 아래 기능을 호출하십시오.
$('#idUkuran').val(11).change();
그것은 간단하고 100 % 작동합니다. 내 작업에서 가져 왔습니다 ... :) 도움을 바랍니다 ..
change()선택 값을 설정 한 후 사용하는 것이 좋습니다.
$("div.id_100 select").val("val2").change();
이렇게하면 코드가 사용자에 의한 선택 변경에 가까워지고 설명이 JS 바이올린에 포함됩니다 .
수행하는 가장 쉬운 방법은 다음과 가능합니다.
HTML
<select name="dept">
<option value="">Which department does this doctor belong to?</option>
<option value="1">Orthopaedics</option>
<option value="2">Pathology</option>
<option value="3">ENT</option>
</select>
jQuery
$('select[name="dept"]').val('3');
출력 : ENT 를 활성화 합니다.
$('#graphtype option[value=""]').prop("selected", true);
이 #graphtype선택 태그의 ID가있는 곳에서 잘 작동합니다 .
예제 선택 태그 :
<select name="site" id="site" class="form-control" onchange="getgraph1(this.options[this.selectedIndex].value);">
<option value="" selected>Site</option>
<option value="sitea">SiteA</option>
<option value="siteb">SiteB</option>
</select>
이것을 지나치게 생각할 이유가 없습니다. 당신이하는 일은 속성에 접근하고 설정하는 것뿐입니다. 그게 다야.
좋아, 그래서 몇 가지 기본적인 dom : 만약 당신이 직접 자바 스크립트에서 이것을하고 있다면, 당신은 다음과 같이 할 것이다.
window.document.getElementById('my_stuff').selectedIndex = 4;
그러나 당신은 직접적인 자바 스크립트로하는 것이 아니라 jQuery로하는 것입니다. 그리고 jQuery에서 .prop () 함수를 사용하여 속성을 설정하고 싶으므로 다음과 같이 할 수 있습니다.
$("#my_stuff").prop('selectedIndex', 4);
어쨌든, 귀하의 ID가 고유한지 확인하십시오. 그렇지 않으면 왜 이것이 작동하지 않았는지 궁금해 할 것입니다.
가장 좋은 방법은 다음과 같습니다.
$(`#YourSelect option[value='${YourValue}']`).prop('selected', true);
var opt = new Option(name, id);
$("#selectboxName").append(opt);
opt.setAttribute("selected","selected");
사용하다:
$("div.id_100 > select > option[value=" + value + "]").attr("selected",true);
이것은 나를 위해 작동합니다. fancybox 업데이트 양식에서 값을 구문 분석하는 데이 코드를 사용하고 있으며 app.js의 전체 소스는 다음과 같습니다.
jQuery(".fancybox-btn-upd").click(function(){
var ebid = jQuery(this).val();
jQuery.ajax({
type: "POST",
url: js_base_url+"manajemen_cms/get_ebook_data",
data: {ebookid:ebid},
success: function(transport){
var re = jQuery.parseJSON(transport);
jQuery("#upd-kategori option[value="+re['kategori']+"]").attr('selected',true);
document.getElementById("upd-nama").setAttribute('value',re['judul']);
document.getElementById("upd-penerbit").setAttribute('value',re['penerbit']);
document.getElementById("upd-tahun").setAttribute('value',re['terbit']);
document.getElementById("upd-halaman").setAttribute('value',re['halaman']);
document.getElementById("upd-bahasa").setAttribute('value',re['bahasa']);
var content = jQuery("#fancybox-form-upd").html();
jQuery.fancybox({
type: 'ajax',
prevEffect: 'none',
nextEffect: 'none',
closeBtn: true,
content: content,
helpers: {
title: {
type: 'inside'
}
}
});
}
});
});
그리고 내 PHP 코드는 다음과 같습니다.
function get_ebook_data()
{
$ebkid = $this->input->post('ebookid');
$rs = $this->mod_manajemen->get_ebook_detail($ebkid);
$hasil['id'] = $ebkid;
foreach ($rs as $row) {
$hasil['judul'] = $row->ebook_judul;
$hasil['kategori'] = $row->ebook_cat_id;
$hasil['penerbit'] = $row->ebook_penerbit;
$hasil['terbit'] = $row->ebook_terbit;
$hasil['halaman'] = $row->ebook_halaman;
$hasil['bahasa'] = $row->ebook_bahasa;
$hasil['format'] = $row->ebook_format;
}
$this->output->set_output(json_encode($hasil));
}
.attr ()은 때때로 이전 jQuery 버전에서 작동하지 않지만 .prop () 사용할 수 있습니다 .
$('select#ddlCountry option').each(function () {
if ($(this).text().toLowerCase() == co.toLowerCase()) {
$(this).prop('selected','selected');
return;
}
});
이것은 Select Control 에서 확실히 작동 합니다 .
$('select#ddlCountry option').each(function () {
if ($(this).text().toLowerCase() == co.toLowerCase()) {
this.selected = true;
return;
} });
이 코드를 입력하십시오.
$("#Controls_ID").val(value);
이 시도. 간단하면서도 효과적인 자바 스크립트 + jQuery는 치명적인 콤보입니다.
SelectComponent :
<select id="YourSelectComponentID">
<option value="0">Apple</option>
<option value="2">Banana</option>
<option value="3">Cat</option>
<option value="4">Dolphin</option>
</select>
선택 :
document.getElementById("YourSelectComponentID").value = 4;
이제 옵션 4가 선택됩니다. 이렇게하면 기본적으로 시작시 값을 선택할 수 있습니다.
$(function(){
document.getElementById("YourSelectComponentID").value = 4;
});
또는 간단한 함수를 만들고 그 안에 줄을 넣고 anyEvent에서 함수를 호출하여 옵션을 선택하십시오.
jQuery + javaScript의 혼합이 마법을 수행합니다 ....
오래된 게시물이지만 여기에 jQuery 플러그인처럼 작동하는 간단한 기능이 있습니다.
$.fn.selectOption = function(val){
this.val(val)
.find('option')
.removeAttr('selected')
.parent()
.find('option[value="'+ val +'"]')
.attr('selected', 'selected')
.parent()
.trigger('change');
return this;
};
다음과 같이 간단하게 할 수 있습니다.
$('.id_100').selectOption('val2');
이것을 사용하는 이유는 선택한 satemant를 크로스 브라우저가 지원하는 DOM으로 변경하고 변경을 트리거하여 포착 할 수 있기 때문입니다.
기본적으로 인간 행동 시뮬레이션입니다.
- 동적으로 변경하려는 값을 염두에 두어야하며 HTML에 정의한 옵션에있는 값과 동일해야합니다
case sensative. 다음과 같이 선택 상자를 동적으로 변경할 수 있습니다.
$("div#YOUR_ID").val(VALUE_CHANGED).change(); //value must present in options you selected otherwise it will not work
이것은 잘 작동합니다
jQuery('.id_100').change(function(){
var value = jQuery('.id_100').val(); //it gets you the value of selected option
console.log(value); // you can see your sected values in console, Eg 1,2,3
});
컨트롤이 정적 HTML 페이지에있는 대신 동적으로 생성 될 때 선택 드롭 다운 컨트롤이 동적으로 변경되지 않는 문제가있는 것 같습니다.
jQuery에서이 솔루션은 저에게 효과적이었습니다.
$('#editAddMake').val(result.data.make_id);
$('#editAddMake').selectmenu('refresh');
부록처럼 두 번째 줄이없는 첫 번째 코드 줄은 실제로 투명하게 작동했습니다. 인덱스를 설정 한 후 선택한 인덱스를 검색하는 것이 정확했으며 실제로 컨트롤을 클릭하면 올바른 항목이 표시되지만 반영되지 않았습니다. 컨트롤의 상단 레이블에 있습니다.
도움이 되었기를 바랍니다.
값이 ID이고 텍스트가 코드 일 때 발생한 문제입니다. 코드를 사용하여 값을 설정할 수는 없지만 ID에 직접 액세스 할 수는 없습니다.
var value;
$("#selectorId > option").each(function () {
if ("SOMECODE" === $(this).text()) {
value = $(this).val();
}
});
//Do work here
참고 URL : https://stackoverflow.com/questions/13343566/set-select-option-selected-by-value
'ProgramingTip' 카테고리의 다른 글
| jQuery를 사용하여 HTML 입력 상자에서 숫자 (0-9) 만 허용하는 방법은 무엇입니까? (0) | 2020.09.28 |
|---|---|
| RecyclerView에서 항목 사이에 구분선과 공백을 추가하는 방법은 무엇입니까? (0) | 2020.09.28 |
| Xcode 프로젝트에 대한 Git 무시 파일 (0) | 2020.09.28 |
| '수익률'의 적절한 사용 (0) | 2020.09.28 |
| git 커밋을 삭제하지만 변경 사항을 사용할 수 있습니까? (0) | 2020.09.28 |