更新：我从代码段中找到了一个与我的设计相似的代码：https://bootsnipp.com/snippets/NBrr0
它在dekstop上工作正常，但是在移动设备上查看时出现问题，我想是这样的：
_colors=$('._select_color_drop li');
for (var i = _colors.length - 1; i >= 0; i--) {
$(_colors[i]).click(function(){
var color_text = $(this).find('span').attr('_text_display');
var elemnt = $(this).closest('._select_color_drop').prev();
elemnt.find('span.color').remove();
$(this).find('span').clone().appendTo(elemnt);
var contents = $(elemnt).contents();
if (contents.length > 0) {
if (contents.get(0).nodeType == Node.TEXT_NODE) {
$(elemnt).html(color_text).append(contents.slice(1));
}
}
if($('[name=_color]').val() == undefined){
elemnt.next().append("<input type='hidden' name='_color' value='"+color_text+"'>");
}else{
$('[name=_color]').val(color_text);
}
})
};
有解决的办法吗？ T_T
我已经解决了这个问题。谢谢 ：）
Bootstrap表单选择样式选项
我对bootstrap 3表单上的样式问题有疑问。
select选项是否有可能是这样的样式？
Sample design
<section>
<div class="col-md-6 col-xs-12 text-left form-cover">
<div class="form-group">
<label for="">Your Age</label>
<select class="form-control" id="">
<option>-Please select your Age-</option>
<option>Below 18</option>
<option>19-30</option>
<option>30-40</option>
<option>40 and above</option>
</select>
</div>
<div class="form-group">
<label for="">Choose Your Color</label>
<select class="form-control" id="">
<option>-Please select colour-</option>
<option><div style="background: yellow; width: 20px; height: 20px;"></div></option>
<option><div style="background: black; width: 20px; height: 20px;"></div></option>
<option><div style="background: white; width: 20px; height: 20px;"></div></option>
<option><div style="background: purple; width: 20px; height: 20px;"></div></option>
<option><div style="background: blue; width: 20px; height: 20px;"></div></option>
<option><div style="background: grey; width: 20px; height: 20px;"></div></option>
<option><div style="background: green; width: 20px; height: 20px;"></div></option>
<option><div style="background: pink; width: 20px; height: 20px;"></div></option>
</select></div>
</div>
</section>
我把div放在选项中，但似乎不起作用。 :(
想知道它可以使用下拉样式，但是我担心后端无法捕获价值。
谢谢！
最佳答案
我看到两种简单的方法来做自己想要的事情：
尝试select2（也存在bs3的版本）并为此编写您自己的样式。使用select2，您仍然可以直接从select获得价值。
使用隐藏的select + bootstrap 3 dropdown component并编写一个简单的jQuery函数：每当用户更改下拉列表的值时，隐藏的select的值也会更改。