Question

我正在进行多选选择，以便在移动设备上显示。

此示例位于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>
...
...
...

占位符显示正确，但如果用户选择任何值，则计数总是太多，因为占位符也是“已选中”。（例如，如果选择了Alabama，它将显示'2 Selected'）

这不是单选的问题，因为占位符被取消选择。

我知道必须有一个简单的解决方案，但我没有得到它。（jquery改变？）

或者，有没有更好的方法在iPhone上显示默认值，而不计算为选中？

我在桌面上使用Select2，但在手机上发现它充满了问题。因此，在移动设备上我只使用默认行为（方向盘）和一些CSS样式。

这让我很接近：

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

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

Answer 1

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

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>
    });
  }
}

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

移动（iOS）上的多选的占位符保持选中状态

1 个答案: