android - 我用什么来代替 html 中的两个多选框以便在 Phone/Ipad 上工作

Question

在我的 HTML UI 中，我希望用户能够选择多个国家，因为国家太多而无法显示完整列表 我启动 HTML 页面，所以它有两个列表:第二个列表只有那些已选择的，第一个包含所有国家(除了已经选择并添加到第二个列表的国家)，用户使用添加和删除按钮在这两个列表之间转移

我通过设置大小属性为每个选择框显示 15 行。

<tr>
    <td>
        <select id="preferred_countries_all" size="15" style="width:200px" multiple="multiple">
            <option value=" AF">Afghanistan</option>
            <option value="AX">Åland Islands</option>
            <option value="AL">Albania</option>
            <option value="DZ">Algeria</option>
            <option value="AS">American Samoa</option>
            <option value="AD">Andorra</option>
            <option value="AO">Angola</option>
            <option value="AI">Anguilla</option>
            <option value="AQ">Antarctica</option>
            <option value="AG">Antigua and Barbuda</option>
            <option value="AR">Argentina</option>
            <option value="AM">Armenia</option>
            <option value="AW">Aruba</option>
            <option value="AU">Australia</option>
            <option value="AT">Austria</option>
            <option value="AZ">Azerbaijan</option>
            <option value="BS">Bahamas</option>
            <option value="BH">Bahrain</option>..
        </select>
    </td>
    <td>
        <button style="width:100px" type="button" id="preferred_countries_add" onclick="add_preferred_countries();">
        Add
        </button>
        <br>
        <button style="width:100px" type="button" id="preferred_countries_remove" onclick="remove_preferred_countries();">
        Remove
        </button>
    </td>
    <td>
        <select id="preferred_countries_selected" name="preferred_countries_selected" size="15" style="width:200px" multiple="multiple">
        </select>
    </td>
</tr>

但是，当我在 iPad 或手机上查看时，它只显示一行，因此您必须单击才能看到已经选择的内容，因此它不再有效。我能理解为什么它会这样做，因为这些设备上的空间有限，也许我对一个选项使用两个选择框是非标准的，但这对我来说作为 UI 不起作用。

我在 HTM 中使用什么来代替两个多选框:所以适用于 Android 手机或 iPad 以及桌面

我的想法是有一个选择框，用户可以选择其他国家，还有一个禁用的文本字段，显示已经选择的内容，随着用户选择更多国家而更新，但是他们如何取消选择值，什么是执行此操作的标准方法？

编辑这是我目前所拥有的

<tr>
                            <td>
                                <label title="Potential Releases from these countries get their score boosted">
                                    Preferred Release Countries
                                </label>
                            </td>
                            <td>
                                <input disabled="disabled" name="preferredCountries" id="preferredCountries" type="text" value="" class="readonlytextinfo">
                            </td>
                        </tr>
                        <tr>
                            <td class="indentedmultiselect" colspan="2">
                                <select id="preferred_countries_select" name="preferred_countries_select" multiple="multiple" onchange="getSelectValues(preferred_countries_select, preferredCountries)">
                                    <option value=" AF">Afghanistan</option><option value="ZW">Zimbabwe</option>
                                </select>
                            </td>
                        </tr>

<script>
function getSelectValues(select, readonlylist) {
  var result = [];
  var options = select && select.options;
  var opt;

  for (var i=0, iLen=options.length; i<iLen; i++) {
    opt = options[i];

    if (opt.selected) {
      result.push(opt.text);
    }
  }
  readonlylist.value =result.toString();
  if(readonlylist.value.length>230)
  {
    readonlylist.value=readonlylist.value.substring(0,230) + '...';
  }
  return result;
}
</script>

Answer 1

每个解决方案如何在移动设备上运行，您必须自己测试。在 chrome 开发工具 (f12) 中，您可以模拟手机，但最终没有什么比真正的手机更好的了。大多数移动 jquery 组件的工作方式是通过隐藏它并显示不同的 DOM 来作用于真实的选择项，在后台更新选择，从而使其与表单或其他需要选择的代码兼容。一些覆盖原件以获得正确的移动选择响应但不同的 View 。