jQuery移动端多选框不更新已选择属性。

Question

我有一个jQuery移动自定义多选框，但是当我选择一项时，我们在HTML select标签上有项目列表，但它没有更新selected属性。

使用页面上的多重选择示例：（链接）。

<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属性？

- Tito

---

你可以通过使用$('#select-choice-9').val()来获取所选的值。为什么需要selected属性呢？ - Rohit Arora

你在使用什么代码来从“select”中检索“selected”选项的值？ - Rory McCrossan

我正在使用ASP.Net MVC，并且希望格式化DefaultModelBinder，它通常接受以下模式：假设：其中一个选项的名称应该为A [0] .B [1] .C [2] .D [3]，其中A，B，C和D是数组对象，这也是我尝试使用此控件实现的内容，如果我可以选择具有属性selected的值，那将是一个好主意。但如果没有，我需要获取span的值，拆分它并搜索每个选项属性，并在弹出窗口关闭后附加事件来更新它。 - Tito

你正在使用的是 JQuery Mobile 而不是 JQuery UI。 - devconcept

嘿 @devconcept，你是正确的，DefaultModelBinder 不检查 "checked" 的值，它在 jquery 移动代码中工作，我不知道它如何将 span 翻译为值，是否有任何隐藏字段？ - Tito

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中拥有的所有selectmenu小部件。如果您以编程方式添加一个小部件，则还必须向该小部件添加事件处理程序。

- devconcept