jQuery   发布时间:2022-04-19  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jquery – 是否可以将选择菜单转换为按钮?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个简单的选择菜单,例如
<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/

解决方法

更新:

为所选值的表单提交添加了隐藏元素.

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/中选择多少选项,这都将有效

大佬总结

以上是大佬教程为你收集整理的jquery – 是否可以将选择菜单转换为按钮?全部内容,希望文章能够帮你解决jquery – 是否可以将选择菜单转换为按钮?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。