Framework7 Smart Select 显示所选项目

Question

我有这个小聪明select:

<div class="list-block">
    <ul>
        <li>
            <a href="#" class="item-link smart-select" data-back-on-select="true" data-open-in="popup">
                <select name="projects" id="projects">
                  <option value="0" selected>Please choose...</option>
                  <option value="1" >House build</option>
                </select>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title">Aufträge</div>
                    </div>
                </div>
            </a>
        </li>
    </ul>
</div>

当用户 select 一个项目时，我创建了一个 cookie 并将值写入其中。重新加载或关闭页面后，我在 cookie 中读取了一个 select 项目。这样可行。但是，我总是 "Please choose" 条目而不是 selected 项目。但是当我点击列表时，正确的项目是 select 但是然后关闭列表我又看到了请选择。这就是我 select 值的方式：

$$("#projects").val(getCookie("timerTasks"));

Answer 1

嗯，我运行之前就入过这个。从 cookie 中选择值后，您必须更新 item-title class：

详情：

// Select your value
$$("#projects").val(getCookie("timerTasks"));

// Selected value text
var selected_text = $$("#projects").find("option:selected").text();

// Change item-title
$$("#projects").parent().find('.item-title').html(selected_text);

一行：

$$("#projects").val(getCookie("timerTasks")).parent().find('.item-title').html($$("#projects").find("option:selected").text());

你可以在那里看到this is a common issue，我想知道为什么它还没有修复。

Answer 2

@tinyCoder 几乎是正确的，除了你需要更新 .item-after，而不是 .item-title。 .item-title是智能select的"label"，.item-after显示selected值。

另外，由于.html()会渲染HTML，而我们只需要文字，我觉得用.text()更合适。所以，我的单行看起来像这样：

$$("#projects").val(getCookie("timerTasks")).parent().find('.item-after').text($$("#projects").find("option:selected").text());

Framework7 v1.6.5（2017 年 9 月）

Answer 3

对于此时需要此答案的人，find("option:selected") 不再适用于此目的。请改用 find("option:checked")。

最终代码为

$$("#projects").val(getCookie("timerTasks")).parent().find('.item-title').html($$("#projects").find("option:checked").text());

Framework7 Smart Select 显示所选项目

Framework7 Smart Select show selected item

html

html-framework-7