jQuery - Abrufen eines benutzerdefinierten Attributs aus der ausgewählten Option

224

Angesichts der folgenden:

<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>

Das funktioniert nicht ...
Was muss ich tun, um den Wert des ausgeblendeten Feldes auf den Wert von myTag zu aktualisieren, wenn die Auswahl geändert wird? Ich gehe davon aus, dass ich etwas tun muss, um den aktuell ausgewählten Wert zu erhalten ...?

jquery Jason
quelle

Antworten:

518

Sie fügen dem <select>Element den Ereignishandler hinzu .
Daher $(this)wird das Dropdown-Menü selbst nicht das ausgewählte sein <option>.

Sie müssen die ausgewählten <option>wie folgt finden:

var option = $('option:selected', this).attr('mytag');
SLaks
quelle
7
Hat meine nächtliche Crunch-Zeit so viel einfacher gemacht ... +1!
eduncan911
3
Hinweis: Wenn Sie die Option abrufen möchten, die beim Laden der Seite ausgewählt wurde (nicht die aktuell ausgewählte Option), können Sie stattdessen $ ('Option [ausgewählt]') verwenden (Hinweis: Wenn bei der Option keine Option ausgewählt wurde Seite geladen, die keine Übereinstimmungen zurückgibt. Wenn Sie also attr () aufrufen, wird dies undefiniert. Einfach zu testen und natürlich zu behandeln.)
Jon Kloske
50

Versuche dies:

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

        $('#setMyTag').val(myTag); 
    }); 
});
Tvanfosson
quelle
26

Dies liegt daran, dass das Element "Auswählen" und nicht "Option" ist, in der Sie das benutzerdefinierte Tag haben.

Versuchen Sie Folgendes : $("#location option:selected").attr("myTag").

Hoffe das hilft.

NawaMan
quelle
Kurze und einfache Antwort. : Daumen hoch:
Vicky Thakor
9

Versuche dies:

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

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

In der Callback - Funktion für change(), thisbezieht sich auf die Auswahl, nicht auf die gewählte Option.

Davide Gualano
quelle
8

Angenommen, Sie haben viele Auswahlmöglichkeiten. Das kann es:

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

Du bist ziemlich nah dran:

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

Einfachere Syntax bei einer Form.

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

... wenn mehr als eine Form.

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

openwonk
quelle
1

Hier ist das gesamte Skript mit einem AJAX-Aufruf, um eine einzelne Liste innerhalb einer Seite mit mehreren Listen anzuvisieren. Keines der anderen oben genannten Dinge hat für mich funktioniert, bis ich das Attribut "id" verwendet habe, obwohl mein Attributname "ItemKey" ist. Mit dem Debugger

Chrome Debug

Ich konnte sehen, dass die ausgewählte Option Attribute hatte: mit einer Zuordnung zur JQuery "id" und dem Wert.

<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>

Hier ist die zu erstellende JSON-Datei ...

{  
"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"
}
]
}

Hoffe das hilft, danke euch allen oben, dass ihr mich so weit gebracht habt.

Curtis Fisher
quelle
0

Versuchen Sie dieses Beispiel:

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

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

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

});
Dharmendra Singh
quelle
0 
$("body").on('change', '#location', function(e) {

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

});
Amit-Rlogical
quelle
0

Sie können dies auch mit versuchen 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>
Akhtar Munir
quelle
0

Der einfachste,

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