Liste aus einem Select-Element erzeugen mit jQuery

jQuery - Ein Bewertungssystem mit Sternchen erstellen.

Ich habe vor längerer Zeit beschrieben, wie man ein Bewertungssystem mit Sternchen aufbauen kann. Dabei bin ich von einer HTML-Liste ausgegangen. Die einzelnen Listenelemente haben im Hintergrund ein ausgefülltes oder ein nicht ausgefülltes Sternchen gehabt. Beim Drüberfahren mit der Maus wurden das fokussierte Listenelement und alle davor mit der Klasse „active“ versehen. Ich bin jedoch auf das Problem gestoßen, dass man nicht immer von einer Liste ausgehen kann. Wenn man beispielsweise ein Framework verwendet, in meinem Fall Symfony, so bekommt man unter Umständen ein Select-Element, indem man den gewünschten Wert auswählen muss. Das ist aber in der Regel weniger komfortabel.

In diesem Tutorial werde ich euch zeigen, wie ihr aus einem Select-Element die gewünschte HTML-Liste erzeugen könnt und den gewählten Wert in ein verstecktes Feld übertragen könnt.

Ich gehe dabei von dem folgenden HTML-Gerüst aus:

1
2
3
4
5
6
7
8
9
10
<div id="content">
  <select id="rating" name="rating">
    <option label="Bitte voten" value="">Bitte voten</option>
    <option label="Sehr schlecht" value="1">Sehr schlecht</option>
    <option label="Schlecht" value="2">Schlecht</option>
    <option label="Mittel" value="3">Mittel</option>
    <option label="Gut" value="4">Gut</option>
    <option label="Sehr gut" value="5">Sehr gut</option>
  </select>
</div>

Damit das Ergebnis später nach etwas aussieht, wird einfach etwas CSS dazu geworfen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.invisible {
  position: absolute;
  overflow: hidden;
  right: 99999px;
}
#rating-list li {
  background: transparent url(images/star-inactive.png) no-repeat center center;
  display: inline-block;
  width: 48px;
  height: 48px;
}
#rating-list li.active,
#rating-list li:hover {
  background: transparent url(images/star-active.png) no-repeat center center;
}

Als Erstes muss für das Select-Element ein verstecktes Feld angelegt werden, das dieselben Attribute beinhaltet. Dieses wird später die Werte aufnehmen und an das Script weitergeben.

var select  = $('#rating');
var input   = '<input type="hidden" name="'+ select.attr('name') +'" id="'+ select.attr('id') +'" value="'+ select.val() +'" />';
select.after(input);

Anschließend gehen wir die Option-Elemente in einer Schleife durch und erzeugen aus den Werten gewünschte Listenelemente. Die Werte, value-Attribute, werden dabei in einem data-value-Attribut hinterlegt. Anschließend löschen wir das Select-Element aus dem DOM.

var list = '<ul id="rating-list"></ul>';
select.before(list).find('option').each(function(item) {
 
  var option = $(this);
  select.remove();
 
  if(option.val().length) {
    $('#rating-list').append('<li data-value="'+ option.val() +'"><span class="invisible">'+ option.text() +'</span></li>')
  }
});

Jetzt müssen wir nur noch den Wert beim Klick auf ein Sternchen an das versteckte Feld weitergeben.

$('#rating-list li').on('click', function(e) {
  $('#rating').val($(this).data('value'));
});

Der Rest kann dann wie in dem alten Tutorial beschrieben behandelt werden. Einfach dafür sorgen, dass das fokkusierte Element und alle vorherigen die Klasse active bekommen. Bei den nachkommenden Elementen muss die Klasse entfernt werden.

$('#rating-list').hover(function() {
  $('#rating-list li').mouseover(function() {
    var li = $(this);
    li.addClass('active').prevAll('li').addClass('active');
    li.nextAll('li').removeClass('active')
  });
}, function() {
  $(this).find('.active').removeClass('active');
});
Das komplette Script und die Vorschau findet ihr auf jsFiddle.
ALL-INKL.COM

3 Kommentars zu dem Artikel “Liste aus einem Select-Element erzeugen mit jQuery”

  1. Avatar von Luca Campisi
    Luca Campisi

    Super Tutorial !!!
    Was ich noch gerne wissen möchte:
    – Bei auswahl blieibt dan die Sterne stehen
    Folgende vorstellung: Ich wähle 2 an, es wird in Imputfeld gespeichert und es bleibt bei 2 Sterne. sollte ich dies mit Select machen?

  2. Avatar von Luca Campisi
    Luca Campisi

    Konnte erfolgreich behoben werden 😉 habe wohl nicht ganz genau nachgeschaut

    Code:
    $(‚#rating-list‘).hover(function() {
    $(‚#rating-list li‘).mouseover(function() {
    var li = $(this);
    li.addClass(‚active‘).prevAll(‚li‘).addClass(‚active‘);
    li.nextAll(‚li‘).removeClass(‚active‘)
    });
    }, function() {
    $(this).find(‚.active‘).addClass(‚active‘);
    });

    von removeClass zu addClass

  3. Avatar von Luca Campisi
    Luca Campisi

    Nun mein nächstes Problem:

    Ich möchte, dass ich die Rating Rate in einer Variabel gespeichert wird und nicht in ein input.