是否可以將選擇菜單轉換爲按鈕？

我有一個簡單的選擇菜單，例如是否可以將選擇菜單轉換爲按鈕？

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

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

那我要求用戶反饋，這是目前由一個簡單的形式提交動力，現在是2013我很想讓2個按鈕，如「豎起大拇指」或「拇指向下」（選中時突出顯示）/可互換（例如，不能一次選擇2）。

走到這一步......但它不是真正的應用選擇值或「選擇」的效果：

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

最近我來是以下...它轉換的選擇菜單以明星評級... - 但它不是一個可用的，所以希望有人可以幫助/指向正確的方向或一個小代碼示例。

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

來源

2013-09-21 user2736203

更新：

隱藏元件增加了對錶單提交選擇的值的。

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/

來源

2013-09-21 10:57:04 techfoobar

感謝您回覆此問題，我想知道，使用Firebug檢查代碼 - 在提交表單時是否仍然通過選擇選項值，還是隻有這樣用按鈕取代了選擇？ - 我認爲我們在這裏贏得冠軍。 – user2736203

你是對的懷疑。這不會通過表單提交的任何價值。爲此，我們需要添加一個包含該值的隱藏元素，並在單擊任何選項時用適當的值填充它。 – techfoobar

這應該做到這一點：http://jsfiddle.net/mBUgc/21/ – techfoobar

是否可以將選擇菜單轉換爲按鈕？

回答

相關問題