已关闭：val append attr 在移动设备上不起作用

Question

更新：我从 sn-p 中找到了一个与我的设计相似的代码：https://bootsnipp.com/snippets/NBrr0

它在桌面上运行良好，但在移动设备上查看时出现问题，我猜是这样的：

 _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 3 表单上的样式问题有疑问。 选择选项是否有可能是这样的样式？ 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 放在选项中，但它似乎不起作用。 :(

想知道它是否可以使用下拉样式，但我担心后端无法捕获该值。

谢谢！

Answer 1

我看到了两种简单的方法来做你想做的事：

1. 尝试select2（bs3 版本也存在）并为此编写自己的样式。使用 select2，您仍然可以直接从 select 中获取值。
2. 使用隐藏选择 + bootstrap 3 dropdown component 并编写一个简单的 jQuery 函数：每次用户更改下拉列表的值时，隐藏选择的值也会发生变化。