jQuery 移动多选不更新所选属性

Question

我有一个 jQuery 移动自定义 multiselect，但是当我 select 一个项目时，我们有 HTML select 上的项目列表标记，但未使用 selected 属性更新。

Using the Multiple selects example of the page:

<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
  <label for="select-choice-9" class="select ui-select">
    Choose shipping method(s):
  </label>
  <div class="ui-select">
    <a href="#" role="button" aria-haspopup="true" data-theme="c" class="ui-btn ui-btn-icon-right ui-btn-corner-all ui-shadow ui-btn-up-c">
      <span class="ui-btn-inner ui-btn-corner-all">
        <span class="ui-btn-text">
          Rush: 3 days, Express: next day
        </span>
        <span class="ui-icon ui-icon-arrow-d ui-icon-shadow"></span>
      </span>
      <span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style="">
        2
      </span>
    </a>

    <select name="select-choice-9" id="select-choice-9" multiple="multiple" data-native-menu="false" tabindex="-1">
      <option>Choose options</option>
      <option value="standard">Standard: 7 day</option>
      <option value="rush">Rush: 3 days</option>
      <option value="express">Express: next day</option>
      <option value="overnight">Overnight</option>
    </select>
  </div>
</div>

有没有办法让它默认添加 selected 属性？

Answer 1

JQuery Mobile 默认不会更新 selected 属性来响应用户的输入。您可以使用以下代码使所选值与属性保持同步。

$(function () {
    $('select').on('change', function (evt) {
        var options = $(evt.target).children('option'),
            current;
        for (var i = 0; i < options.length; i++) {
            current = options[i];
            if (current.selected === true && !current.hasAttribute('selected')) {
                options[i].setAttribute('selected', '');
            }
            if (current.selected === false && current.hasAttribute('selected')) {
                options[i].removeAttribute('selected');
            }
        }
    });
});

请记住，这将适用于您在 DOM 中已有的所有选择菜单小部件。如果您以编程方式添加一个，您还必须将事件处理程序添加到该小部件。