Question

更新：我找到了与我的设计类似的代码段代码：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表单上的样式问题有疑问。是否有任何机会选择选项可以像这样的样式？ 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

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

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

已关闭：val附加attr不能在移动设备

1 个答案: