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');

— SLaks
ソース

7

私の徹夜のクランチタイムをとても簡単にしました... +1！

— eduncan911 2010

3

ページが読み込まれたときに選択されたオプション（現在選択されているオプションではない）を取得する場合は、代わりに$（ 'option [selected]'、this）を使用できます（注：オプションが選択されなかった場合、ページが読み込まれ、一致が返されないため、その上でattr（）を呼び出すと、未定義になります。テストと処理はもちろん簡単です。）

— Jon Kloske

50

これを試して：

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

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

— Tvanfosson
ソース

26

これは、要素が「選択」であり、カスタムタグがある「オプション」ではないためです。

これを試してください：$("#location option:selected").attr("myTag")。

お役に立てれば。

— なわまん
ソース

短くてシンプルな答え。：thumbsup：

— Vicky Thakor 2018

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

1つのフォームの場合、構文が単純になります。

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

...複数のフォームの場合。

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

— openwonk
ソース

1

以下は、複数のリストを持つページ内の単一のリストをターゲットにするAJAX呼び出しを含むスクリプト全体です。私の属性名が「ItemKey」であるにもかかわらず、「id」属性を使用するまで、上記の他のものはどれも私にとってうまくいきませんでした。デバッガーを使用する

Chromeデバッグ

選択したオプションに属性があることがわかりました。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');

— ロビン・ホサイン
ソース