jQuery-선택한 옵션에서 사용자 정의 속성 가져 오기

224

다음을 감안할 때 :

<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의 값으로 업데이트하려면 어떻게해야합니까? 현재 선택된 값을 얻는 것에 대해 뭔가를해야한다고 가정하고 있습니다 ...?

jquery

— 제이슨
소스

518

<select>요소에 이벤트 핸들러를 추가하고 있습니다.
따라서 $(this)선택한이 아닌 드롭 다운 자체가됩니다 <option>.

다음 <option>과 같이 선택된을 찾아야합니다 .

var option = $('option:selected', this).attr('mytag');

— 슬랙
소스

7

밤새 크런치 타임이 훨씬 쉬워졌습니다. +1!

— eduncan911

3

페이지가로드 될 때 선택된 옵션 (현재 선택된 옵션이 아님)을 검색하려는 경우 $ ( 'option [selected]'를 대신 사용할 수 있음) 대신이 옵션을 사용할 수 있습니다 (참고 : 페이지가로드되면 일치하는 항목이 반환되지 않으므로 attr ()을 호출하면 정의되지 않습니다. 쉽게 테스트하고 처리 할 수 있습니다.)

— Jon Kloske

50

이 시도:

$(function() { 
    $("#location").change(function(){ 
        var element = $(this).find('option:selected'); 
        var myTag = element.attr("myTag"); 

        $('#setMyTag').val(myTag); 
    }); 
});

— 티 반포 손
소스

26

요소가 사용자 정의 태그가있는 "옵션"이 아니라 "선택"이기 때문입니다.

이것을 시도하십시오 : $("#location option:selected").attr("myTag").

도움이 되었기를 바랍니다.

— 나와 만
소스

짧고 간단한 답변. : thumbsup :

— Vicky Thakor

9

이 시도:

$("#location").change(function(){
            var element = $("option:selected", this);
            var myTag = element.attr("myTag");

            $('#setMyTag').val(myTag);
        });

에 대한 콜백 함수에서 change(), this선택을하지 선택한 옵션을 의미합니다.

— 다비데 과라 노
소스

8

많은 선택이 있다고 가정하십시오. 이것은 할 수 있습니다 :

$('.selectClass').change(function(){
    var optionSelected = $(this).find('option:selected').attr('optionAtribute');
    alert(optionSelected);//this will show the value of the atribute of that option.
});

— 파울로
소스

7

당신은 꽤 가깝습니다 :

var myTag = $(':selected', element).attr("myTag");

— 세린
소스

4

하나의 양식이면 더 간단한 구문입니다.

var option = $('option:selected').attr('mytag')

... 둘 이상의 형태 인 경우.

var option = $('select#myform option:selected').attr('mytag')

— 오픈 원크
소스

1

다음은 여러 목록이있는 페이지 내의 단일 목록을 대상으로하는 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"
}
]
}

이것이 도움이되기를 바랍니다.

— 커티스 피셔
소스

0

이 예를보십시오 :

$("#location").change(function(){

    var tag = $("option[value="+$(this).val()+"]", this).attr('mytag');

    $('#setMyTag').val(tag); 

});

— 다멘 드라 싱
소스

0

$("body").on('change', '#location', function(e) {

 var option = $('option:selected', this).attr('myTag');

});

— 모방 논리
소스

0

당신은 또한 이것을 시도 할 수 있습니다 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>

— 아크 타르 무 니르
소스

0

가장 쉬운 것은

$('#location').find('option:selected').attr('myTag');

— 로빈 호사 인
소스