android – 我在html中使用什么代替两个多选框,因此适用于Phone / Ipad

我通过设置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>