jQuery - 선택한 옵션에서 사용자 지정 특성 가져오기
다음을 고려할 때:
<select id="location">
<option value="a" myTag="123">My option</option>
<option value="b" myTag="456">My other option</option>
</select>
<input type="hidden" id="setMyTag" />
<script>
$(function() {
$("#location").change(function(){
var element = $(this);
var myTag = element.attr("myTag");
$('#setMyTag').val(myTag);
});
});
</script>
그건 안 돼요...
선택을 변경할 때 숨겨진 필드의 값을 myTag 값으로 업데이트하려면 어떻게 해야 합니까?현재 선택한 값을 가져오는 것에 대해 뭔가 조치를 취해야 할 것 같습니다...?
이벤트 핸들러를 에 추가하는 중입니다.<select>원소의
그러므로,$(this)선택한 항목이 아닌 드롭다운 자체가 됩니다.<option>.
선택한 항목을 찾아야 합니다.<option>다음과 같이:
var option = $('option:selected', this).attr('mytag');
사용해 보십시오.
$(function() {
$("#location").change(function(){
var element = $(this).find('option:selected');
var myTag = element.attr("myTag");
$('#setMyTag').val(myTag);
});
});
요소가 사용자 지정 태그가 있는 "선택"이 아니라 "선택"이기 때문입니다.
사용해 보십시오.$("#location option:selected").attr("myTag").
이게 도움이 되길 바랍니다.
선택 항목이 많다고 가정합니다.이것은 할 수 있습니다.
$('.selectClass').change(function(){
var optionSelected = $(this).find('option:selected').attr('optionAtribute');
alert(optionSelected);//this will show the value of the atribute of that option.
});
사용해 보십시오.
$("#location").change(function(){
var element = $("option:selected", this);
var myTag = element.attr("myTag");
$('#setMyTag').val(myTag);
});
다음에 대한 콜백 기능change(),this선택한 옵션이 아닌 선택 항목을 나타냅니다.
당신은 아주 가깝습니다.
var myTag = $(':selected', element).attr("myTag");
가장 쉬운 것은
$('#location').find('option:selected').attr('myTag');
하나의 형식이면 더 간단한 구문입니다.
var option = $('option:selected').attr('mytag')
하나 이상의 양식인 경우.
var option = $('select#myform option:selected').attr('mytag')
다음은 여러 목록이 있는 페이지 내의 단일 목록을 대상으로 하는 AJAX 호출이 포함된 전체 스크립트입니다.제 속성 이름이 "ItemKey"임에도 불구하고 "id" 속성을 사용하기 전까지는 위의 다른 어떤 것도 저에게 효과가 없었습니다.디버거 사용
선택한 옵션에 JQuery "id"에 대한 맵과 값이 포함된 속성이 있음을 확인할 수 있었습니다.
<html>
<head>
<script type="text/JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<select id="List1"></select>
<select id="List2">
<option id="40000">List item #1</option>
<option id="27888">List item #2</option>
</select>
<div></div>
</body>
<script type="text/JavaScript">
//get a reference to the select element
$select = $('#List1');
//request the JSON data and parse into the select element
$.ajax({
url: 'list.json',
dataType:'JSON',
success:function(data){
//clear the current content of the select
$select.html('');
//iterate over the data and append a select option
$.each(data.List, function(key, val){
$select.append('<option id="' + val.ItemKey + '">' + val.ItemText + '</option>');
})
},
error:function(){
//if there is an error append a 'none available' option
$select.html('<option id="-1">none available</option>');
}
});
$( "#List1" ).change(function () {
var optionSelected = $('#List1 option:selected').attr('id');
$( "div" ).text( optionSelected );
});
</script>
</html>
다음은 생성할 JSON 파일입니다...
{
"List":[
{
"Sort":1,
"parentID":0,
"ItemKey":100,
"ItemText":"ListItem-#1"
},
{
"Sort":2,
"parentID":0,
"ItemKey":200,
"ItemText":"ListItem-#2"
},
{
"Sort":3,
"parentID":0,
"ItemKey":300,
"ItemText":"ListItem-#3"
},
{
"Sort":4,
"parentID":0,
"ItemKey":400,
"ItemText":"ListItem-#4"
}
]
}
이것이 도움이 되기를 바랍니다, 여기까지 오게 해주신 모든 분들께 감사드립니다.
$("body").on('change', '#location', function(e) {
var option = $('option:selected', this).attr('myTag');
});
var optionAttr1 = $(this).find('option:selected').attr("myTag");
var optionAttr = $('#location option:selected').attr("myTag");
다음 예를 사용해 보십시오.
$("#location").change(function(){
var tag = $("option[value="+$(this).val()+"]", this).attr('mytag');
$('#setMyTag').val(tag);
});
당신은 또한 이것을 시도할 수 있습니다.data-myTag
<select id="location">
<option value="a" data-myTag="123">My option</option>
<option value="b" data-myTag="456">My other option</option>
</select>
<input type="hidden" id="setMyTag" />
<script>
$(function() {
$("#location").change(function(){
var myTag = $('option:selected', this).data("myTag");
$('#setMyTag').val(myTag);
});
});
</script>
직접적인 방법은 다음과 같습니다.
선택한 옵션 특성 값 가져오기:
var selectedOptionAttributeValue = $('#location option:selected').attr('myTag');
선택한 텍스트 가져오기:
var selectedOptionText = $('#location').text();
선택한 값 가져오기:
var selectedOptionValue = $('#location').val();
동적 행 ID에 따라 호출하려면 다음을 사용합니다.
var data = $(`#var_name_${row_id} option:selected`).attr('value2');
언급URL : https://stackoverflow.com/questions/2230704/jquery-getting-custom-attribute-from-selected-option
'programing' 카테고리의 다른 글
| 키 입력 스크립트를 기준으로 객체 배열을 정렬하는 방법 (0) | 2023.07.29 |
|---|---|
| JavaScript Regex를 사용하여 문자열을 추출하는 방법은 무엇입니까? (0) | 2023.07.29 |
| Spring Web Services가 모든 SOAP 요청을 기록하도록 하려면 어떻게 해야 합니까? (0) | 2023.07.29 |
| XMLHttpRequest.open()을(를) 재정의합니다. (0) | 2023.07.29 |
| 미디어 쿼리가 화면 대신 div 요소를 기준으로 크기를 조정할 수 있습니까? (0) | 2023.07.29 |