erste Attribut-Werte von ausgewählten Optionen im multiselect -

Habe ich ein multi select Elements in jQuery.

Ist hier ein Beispiel.

<select multiple id="multiple">
    <option value="1" type="Alice">Option 1</option>
    <option value="2" type="Bob">Option 2</option>
</select>

Ich weiß, ich kann all die Werte, die ausgewählt werden, indem Sie tun $("#multiple").val();

Wie bekomme ich auch die type-Attribute der ausgewählten Optionen?

  • Mit HTML5 können Sie .selectedOptions; es ist eine Sammlung von Option Elemente aus, die Sie bekommen können die Werte der attribute.
InformationsquelleAutor AndroidDev93 | 2014-06-25
  1. 3

    Müssen Sie verwendet ein pseudo - option:selected und schauen alle Optionen ausgewählt:

    $('#multiple').change(function(){
    var $value =$('option:selected',this).attr('type');
    console.log($value);
});

    Oder mit der .each() wie:

    $('#multiple option:selected').each(function(){
    var $value =$(this).attr('type');
    console.log($value);
});

    DEMO

    DEMO Mit .jeder()

    • würde upvote diese aber der OP fragte nach, wie man das type-Attribut vom ausgewählten Elemente nicht den Wert...
    • dass nur noch gibt mir das value-Attribut. Ich will das type-Attribut.
    • Aktualisiert. Ich Verstand nicht, gute Frage. My bad 🙂
    • Funktioniert gut, einziges problem das ich sehe ist, dass bei der Auswahl durch shift-Taste statt Klick, wird es nicht funktionieren
    InformationsquelleAutor Wilfredo P
  2. 3

    Versuchen Sie dies:

    $(document).on("change", "#multiple", function(){
    var ids = $(this).find('option:selected').map(function() {
        return $(this).attr('type');    
    }).get();
    console.log(ids);
});

    JSFiddle:

    http://jsfiddle.net/LFMG7/2/

    • Die Frage ist, über mehrere wählen Sie die box, d.h. mehr als das element ausgewählt werden kann.
    • Aktualisierte Antwort !
    • Yep, das sieht besser aus 🙂 obwohl, mit ein Delegierter Ereignis-handler-Dokument scheint nicht der beste Weg.
    InformationsquelleAutor imbondbaby
  3. 2

    Wahrscheinlich der einfachste Weg ist die Verwendung .map():

    var types = $('#multiple > option:selected').map(function() {
    return this.getAttribute('type');
}).get();

    Demo

    InformationsquelleAutor Ja͢ck
  4. 1
    var t = document.getElementById('multiple'), a = [], i;
for(i = 0; i < t.length; i++) {
    if(t[i].selected) a.push(t[i].getAttribute('type'));
}
//tested on IE8+, Chrome (Windows & Linux), Safari, Firefox (Windows & Linux), Opera

    Fiddle

    • Dies wird nicht aktivieren Sie alle ausgewählte Optionen in einem Rutsch.
    • Haben Sie überprüft, die zur Verfügung gestellt Geige?
    • Sie werden versuchen, es scheinen, wie Sie hatte diese Antwort alle zusammen? 😉 in jedem Fall, sind Sie sicher, dass subscripting die <select> element funktioniert zuverlässig mit allen Browsern?
    • Gut, Sie können sehen, alle die änderungen :). Auf der anderen Seite, würde ich gerne wissen, ob meine Antwort hat eine cross-browser-Problem.
    • Mein Punkt war, dass Sie aktualisiert Ihre Antwort nachdem mein Kommentar; subscripting das select-element direkt erfordert die HTML5-Schnittstellen, so dass nicht alle Browser haben die Unterstützung für diese.
    • Natürlich habe ich Ihren Punkt :). Gut, ich habe gerade getestet, das snippet auf sechs Browsern und es funktioniert.
    • Ja, aber Sie sind auf allen aktuellen Browsern; nicht erwarten, dass diese arbeiten auf IE8, aber (ja, ich weiß, es ist "alte" und "alle").
    • Willst du mich verarschen? 🙂 Nur, damit Sie wissen, ich habe gerade getestet das snippet auf IE 8.0.6001 und es funktioniert. Natürlich es klappt 🙂
    • Naja, das kommt überraschend für mich, weil die specs erwähnt, dass es ein HTML5-thingie und ich habe nicht eine Windows-Maschine zu testen, also danke für die Tests,:) +1

    InformationsquelleAutor hex494D49
  5. 0

    Vielleicht so etwas wie dieses:

    var myList = array();
$('#multiple option:selected').each(function(){
    myList.push({"val":$(this).val(), "type":$(this).attr("type")});
});
    • Es gibt keine jQuery-Funktion aufgerufen .attrib().
    • Hoppla, du hast Recht, ich meinte attr()
    InformationsquelleAutor primehalo
Schreibe einen Kommentar