Ist es möglich, zu konvertieren, wählen Sie Menü Tasten?

Habe ich eine einfache select-Menü z.B.

<p>Would you recommend this company?</p>

<select>
    <option value="yes">Yes</option>
    <option value="no">No</option>
</select>

Dass ich bitte um feedback der Nutzer, die es momentan macht, indem Sie ein einfaches Formular Absenden, jetzt ist es 2013, ich würde lieben, es zu machen, 2 x Tasten, z.B. "Daumen hoch" oder "Daumen Runter" (Und hervorgehoben, wenn ausgewählt)/austauschbar (z.B. nicht auswählen können 2 auf einmal).

So weit gekommen... Aber es ist nicht wirklich anwenden der Werte auswählen oder eine "ausgewählte" - Effekt:

http://jsfiddle.net/mBUgc/18/

Nächste, den ich habe ist die folgende...wandelt die select-Menüs auf Sterne-Bewertungen... - Aber es ist nicht wirklich nutzbar, also hoffentlich kann mir jemand helfen/zeigen in die richtige Richtung oder ein kleines code-Beispiel.

http://netboy.pl/demo/jquery-bar-rating/examples/

InformationsquelleAutor user2736203 | 2013-09-21
  1. 8

    Update:

    Hidden-element Hinzugefügt, für die formularübergabe von gewählten Wert.

    http://jsfiddle.net/mBUgc/21/

    Hier ist eine einfache implementation, was Sie suchen zu erreichen.

    Demo: http://jsfiddle.net/mBUgc/19/

    JavaScript:

    $("select option").unwrap().each(function() {
    var btn = $('<div class="btn">'+$(this).text()+'</div>');
    if($(this).is(':checked')) btn.addClass('on');
    $(this).replaceWith(btn);
});

$(document).on('click', '.btn', function() {
    $('.btn').removeClass('on');
    $(this).addClass('on');
});

    CSS:

    div.btn {
    display: inline-block;
    /** other styles **/
}
div.btn.on {
    background-color: #777;
    color: white;
    /** styles as needed for on state **/
}

    Hinweis: Dies funktioniert unabhängig von der Anzahl der Optionen, die Sie haben in Ihrem select - http://jsfiddle.net/mBUgc/20/

    • Dank fo rgetting wieder mit dabei, ich Frage mich, untersuchen Sie den code mit Firebug - wird dies passieren noch die option wählen, Wert, wenn das Formular abgesendet hat, oder hat dieser einfach ersetzt die wählen Sie mit den Tasten? - Ich denke, wir sind auf einen Gewinner hier.
    • Du hast Recht mit der Vermutung. Dies nicht passieren, wird Wert auf Formular Absenden. Für die, die wir brauchen, um ein hidden-element, den Wert enthält, und füllen Sie es mit dem entsprechenden Wert, wenn eine beliebige option klicken.
    • Dies sollte es tun: jsfiddle.net/mBUgc/21
    • Das sieht toll aus mir, hey, ich möchte ein Dankeschön für die Zeit nehmen, helfen mir heute sehr geschätzt.
    • Akzeptiert. Froh, dass es geholfen hat. 🙂
    • Es scheint ein Fehler sein, wenn die option " enthält "selected" parameter, dann werden nicht nur diese option wird als ausgewählt markiert aber in der nächsten Optionen werden als ausgewählt markiert zu - jsfiddle.net/tu68dyzz

    InformationsquelleAutor techfoobar
Schreibe einen Kommentar