選択メニューをボタンに変換できますか？

Question

私は単純な選択メニューを持っています。

私は、ユーザーからのフィードバックを求める

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

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

、それが今では私はそれ例えば2×ボタン作るのが大好きです2013年ですが、現在、提出する簡単なフォームによる電力です（選択されたときにハイライトされる）/交換可能である（例えば、一度に2つを選択することはできない）。

はここまで手に入れた...しかし、それは本当に値を選択または「選択」効果を適用していない：私はに来ている

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

最寄のには、次のさ...選択メニューを変換しますしかし、それは実際には役に立たないので、うまくいけば誰かが助けてくれるかもしれません。

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

Answer 1

更新：

隠し要素は、選択された値のフォーム送信のために添加。

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

---

ここにあなたが達成するために探しているものの単純な実装です。

デモ：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 **/ 
} 

注：これは関係なく、動作しますhttp://jsfiddle.net/mBUgc/20/