Question

我正在开发一个项目，我在其中生成一个下拉列表，用户可以在表单中选择多个值中的一个（如果这很重要，我可以使用Symfony和Twig）。一切都很好，但我真的不知道如何选择一个特定的值（例如用户喜欢的颜色可以改变，但如果它已经知道是蓝色的，我想要蓝色到在改变之前选择。）

生成的HTML如下所示：

<div class="col-cs-12 col-sm-6 col-md-4">
    <input type="hidden" class="choice-to-click" value="Second">
    <div class="btn-group bootstrap-select form-control">
        <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" data-id="category_ReceipientTemplateID" title="Kérem válasszon"><span class="filter-option pull-left">Kérem válasszon</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span>
        </button>
        <div class="dropdown-menu open">
            <div class="bs-searchbox">
                <input type="text" class="form-control" autocomplete="off">
            </div>
            <ul class="dropdown-menu inner" role="menu">
                <li data-original-index="0" class="selected"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Kérem válasszon</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
                <li data-original-index="1"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">asda</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
            </ul>
        </div>
        <select id="category_ReceipientTemplateID" name="category[ReceipientTemplateID]" class="selectpicker form-control" data-live-search="true" tabindex="-98">
            <option value="" selected="selected">Kérem válasszon</option>
            <option value="40">First</option>
            <option value="42">Second</option>
            <option value="43">Third</option>
        </select>
    </div>
</div>

现在，我们假设应该事先选择第二个值，因此在我不与此控件交互的情况下，或者单击按钮键入某个值时，我的选项Second应该选择。问题是我怎样才能以优雅的方式做到这一点？

我目前的解决方案如下：

define(['jquery1_11'], function(jq) 
{
    var $ = jq;
    return function() {
        setTimeout(function() {
            $(".choice-to-click").each(function() {
                var valueToSearch = this.value;
                $(this).siblings(".bootstrap-select").find(".dropdown-menu.inner .text").filter(function() {
                    return this.innerText === valueToSearch;
                }).click();
            });
        }, 1000);
    };
});

但这是一个非常难看的黑客。它有效，但我并不为此感到自豪。基本上我正在等待Bootstrap的一秒钟来完成它的工作，初始化所有内容，然后我自动点击我需要的项目。有没有办法告诉Bootsrap以某种方式选择给定值？

Answer 1

var users = ["2017-01-15T19:18:13.000Z", "2016-11-24T17:33:56.000Z", "2017-04- 
24T00:41:18.000Z", "2017-03-06T01:45:29.000Z", "2017-03-05T03:30:40.000Z"];
_.sortBy(users, String);

Answer 2

事实证明我需要初始化selectpicker，如下所示：

            $('.selectpicker').selectpicker('refresh');

初始化时，我可以轻松click任何项目：

    $(".choice-to-click").each(function() {
        var valueToSearch = this.value;
        $(this).siblings(".bootstrap-select").find(".dropdown-menu.inner .text").filter(function() {
            return this.innerText === valueToSearch;
        }).click();
    });

我知道我仍在点击，但至少我摆脱了setTimeout。如果有人能提出更优雅的解决方案，我很乐意接受他或她的回答。否则我将不得不接受我自己的答案。

选择Bootstrap Select的特定值

2 个答案: