Seç menüyü düğmelere dönüştürmek mümkün mü?

Question

Basit bir seçim menüsüne sahibim ör.

Ben kullanıcı geri bildirim isteme Yani

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

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

, bundan böyle kendi 2013 ben 2 x düğmelerine örneğin yapmak isteriz var, şu anda teslim basit formu tarafından güç var "Thumbs Up" veya "Thumbs Down" (ve seçildiğinde vurgulanır)/değiştirilebilir (ör., Aynı anda 2'yi seçemez).

kadar bu var ... Ama gerçekten seçme değerlerini ya da bir "seçilmiş" efekti uygulanarak değil:

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

i geldiniz yakın takip ... seçme menüleri dönüştüren hangi yıldız derecelendirmelerine ... - Ama bu gerçekten kullanışlı değil, umarım birileri doğru yönde veya küçük bir kod örneğinde yardımcı olabilir.

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

Answer 1

Güncelleme:

Gizli eleman seçilen değerin form gönderimine ilişkin eklendi.

---

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

Burada elde etmek aradıklarını basit uygulama var.

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

Not: Bu bakılmaksızın çalışacak Seçiminizde sahip olduğunuz seçeneklerin sayısının - http://jsfiddle.net/mBUgc/20/