JQuery Mobile自定义下拉问题答案

【问题标题】：JQuery Mobile custom dropdown issueJQuery Mobile自定义下拉问题
【发布时间】：2016-04-06 17:41:31
【问题描述】：

我在第一次选择下拉列表第一个值后遇到问题。当下拉选项向下滑动选择时，默认情况下会选择第一个值，因为我无法选择第一个值。我正在使用 JQuery 移动框架，并且正在编写自定义 JS 来更改下拉菜单。我只需要使用自定义 JS 处理此下拉列表，并且由于我的项目存在其他问题，因此无法使下拉列表与此自定义逻辑一起使用。

这里的第一个值是下拉列表中的“美国”

非常感谢此问题的解决方案。提前致谢。

HTML：

<select id="drpDwn">
    <option value="" disabled="disabled">select</option>
    <option value="US">US</option>
    <option value="AU">AU</option>
    <option value="NZ">NZ</option>
</select>

JS：

$(document).on('change', '#drpDwn', function () {
var index = $(this)[0].selectedIndex;
$(this).attr('selectedIndex', index);
$(this).find('option').removeAttr('selected');
$(this).find('option').eq(index).attr('selected', 'selected');
$(this).siblings('span').html($(this).find('option').eq(index).text());
});

http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css

【问题讨论】：

我不明白这个问题，你想保留之前选择的哪个选项？或者，一旦选择了一个选项，您希望它被禁用吗？
@JeramiahHarland.... 首先无法从下拉列表中选择 US，但是当我更改为其他值（例如 NZ 或 AU）时，如果我想选择返回第一个值（例如 US），它没有被选中

标签： javascript jquery jquery-mobile

【解决方案1】：

看看这个JSFiddle

差异制造者正在修改：

$(this).find('option').removeAttr('selected');

进入：

$(this).find('option:not(:selected)').removeAttr('selected');

当“更改”被触发时，所选属性被添加到新选项中，因此您将其从所有内容中剥离，甚至是新选择。这就是为什么选项从未改变的原因。

使用 :not(:selected) 就派上用场了，因为它只会从不是当前选定选项的事物中剥离属性。

【讨论】：