移动设备 (iOS) 上的多选占位符保持选中状态

Posted 2023-03-14

【中文标题】移动设备 (iOS) 上的多选占位符保持选中状态

【英文标题】：Placeholder for Multiple Select on mobile (iOS) stays selected

【发布时间】：2017-05-19 16:49:48

【问题描述】：

我正在处理多选选择，以显示在移动设备上。

此示例在 ios 上。

 <select id="statesLic" multiple="multiple">
  <option disabled="disabled" selected="selected">Licensed States</option>
  <option value="Alabama">Alabama</option>
  <option value="Alaska">Alaska</option>
  <option value="Arizona">Arizona</option>
...
...
...

占位符显示正确，但如果用户选择任何值，计数将始终为 1，因为占位符也被“选中”。 （例如，如果选择了阿拉巴马州，它将显示 '2 Selected'）

这对单选来说不是问题，因为占位符会被取消选择。

我知道必须有一个简单的解决方案，但我不明白。 （jquery 变化？）

或者，有没有更好的方法在 iPhone 上显示默认值，而不会将其计为已选择？

---

我在桌面上使用 Select2，但在移动设备上发现它充满了问题。因此，在移动即时通讯上，只需使用带有一些 css 样式的默认行为（***）。

这让我很接近：

  $('select').on('change', function(event) 
                $('#' +  event.currentTarget.id + ' option[disabled]').remove();
            )

但现在我需要在页面加载时删除占位符，如果用户之前保存了选择（因为计数仍然关闭）。

【问题讨论】：

我想知道将许可状态设置为 optgroup 会起作用developer.mozilla.org/en-US/docs/Web/html/Element/optgroup

假设您使用的是引导多选。您没有配置以下选项的任何原因：nonSelectedText 和其他变量选择的文本选项？

更新的问题 - 我在 标签上使用 select2，但它在 iOS 上很笨重。所以我只是在移动设备上使用默认行为。移动端暂时仅次于桌面应用程序，但我想在有更多时间的时候研究一下 jQuery Mobile 等。

【参考方案1】：

我遇到了类似的问题，在桌面上使用了 selected.js，但是默认情况下手机不会加载选择。这是我最终使用的解决方案：

var isMobile = <I set this boolean from the backend>;

var $selects = $('<your selects selector here>');
if (isMobile) 
  // This is necessary because mobile phones don't load chosen;
  $selects.each(function () 
    $(this).once('setMobilePlaceholder', function () 
      // This will determine if the placeholder is selected after a search
      var selectedTxt = "";
      if ($(':selected', this).length == 0) 
        selectedTxt = " selected";
      
      $(this)
        .find('option:first-child')
        .before('<option value="" default disabled' + selectedTxt + '>' + $(this).attr('data-placeholder') + '</option>');
      $(this).one('mousedown', function () 
        $(this).find('option:first-child').prop("selected", false);
      );
    );
  );

else 
  if ($selects.length > 0) 
    $selects.chosen(
      <chosen options go here>
    );
  

希望这可以节省一些时间。