我有一个简单的选择菜单,例如
<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/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/中选择多少选项,这都将有效
原文地址:https://www.jb51.cc/jquery/181430.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。