È possibile convertire un menu di selezione in pulsanti?

Question

Ho un semplice menu di selezione, ad es.

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

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

che chiedo il feedback degli utenti, è attualmente il potere da una forma semplice presentare, ora è il 2013 mi piacerebbe a segno il 2 pulsanti x esempio "Thumbs Up" o "Thumbs Down" (E evidenzia quando selezionato)/intercambiabile (ad esempio non è possibile selezionare 2 contemporaneamente).

arrivato fin qui ... ma non è realmente applicare i valori di selezione o un effetto "selezionato":

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

più vicina che ho incontra è il seguente ... che converte selezionare i menu per classificare le valutazioni ... - Ma non è davvero utilizzabile, quindi spero che qualcuno possa aiutare/indicare nella giusta direzione o un piccolo esempio di codice.

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

Answer 1

Aggiornamento:

elemento nascosto aggiunto per modulo di presentazione del valore scelto.

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

---

Ecco una semplice implementazione di ciò che si sta cercando di raggiungere.

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 **/ 
} 

Nota: Questo funziona a prescindere del numero di opzioni che avete nella vostra select - http://jsfiddle.net/mBUgc/20/