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

3

Обратите внимание, что если вы хотите получить опцию, которая была выбрана при загрузке страницы (а не выбранной в данный момент опции), вы можете использовать вместо нее $ ('option [selected]', this) (примечание: если опция не была выбрана, когда загруженная страница, которая не будет возвращать совпадений, поэтому вызов attr () для этого приведет к неопределенности. Легко проверить и, конечно, разобраться.)

Джон Клоске

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").

Надеюсь это поможет.

NawaMan
источник

Краткий и простой ответ. : thumbsup:

Вики Такор

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

Cerin
источник

4

Более простой синтаксис, если одна форма.

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

... если более одной формы.

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

openwonk
источник

1

Вот весь сценарий с вызовом AJAX для определения целевого списка на странице с несколькими списками. Ничто из вышеперечисленного не работало для меня, пока я не использовал атрибут «id», хотя имя моего атрибута «ItemKey». С помощью отладчика

Chrome Debug

Я смог увидеть, что выбранная опция имеет атрибуты: с сопоставлением с «id» JQuery и значением.

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

});

Амит-Rlogical
источник

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

Робин Хоссейн
источник

jQuery - получение пользовательского атрибута из выбранной опции

Ответы: