android - 我用什么代替html中的两个多选框，因此可以在Phone/Ipad上使用

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

我通过设置size属性为每个选择框显示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>

最佳答案

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

关于android - 我用什么代替html中的两个多选框，因此可以在Phone/Ipad上使用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48264919/