Is it possible to convert a select menu to buttons?

问题

I have a simple select menu e.g.

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

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

That I ask for user feedback, it's currently power by a simple form submit, now it's 2013 i'd love to make it 2 x buttons e.g. "Thumbs Up" or "Thumbs Down" (And highlights when selected)/interchangable (e.g. can't select 2 at once).

Got this far... But it's not really applying the select values or a "selected" effect:

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

Closest i've come to is the following...which converts select menus to star ratings... - But it's not really a usable, so hopefully someone can help/point in right direction or a little code example.

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

回答1:

Update:

Hidden element added for form submission of chosen value.

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

Here's a simple implementation of what you are looking to achieve.

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

Note: This will work regardless of the number of options you have in your select - http://jsfiddle.net/mBUgc/20/

来源：https://stackoverflow.com/questions/18931628/is-it-possible-to-convert-a-select-menu-to-buttons

标签

jquery

html-select