我在html中使用什么而不是两个多选框,因此适用于Phone/Ipad

Question

在我的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>

Answer 1

您所要求的内容无法通过选择框本地完成。移动浏览器将按照自己的意愿行事。我建议你使用免费的谷歌搜索引擎来解决你的问题。

例如：

• 被选中的
• 多选.js

或其他取决于您选择的库/框架。如果您向我们提供有关您的库堆栈的更多信息，我们可能会更好地指导您。