我在html中使用什么而不是两个多选框，所以可以在Phone / Ipad上使用 [英] What do I use instead of two multiselect boxes in html so works on Phone/Ipad

问题描述

在我的HTML界面中，我希望用户能够选择多个国家，因为有太多的国家允许显示完整的列表我启动HTML页面，因此它有两个列表：第二个列表只有那些已被选中的第一个包含所有国家（除了已经选择并添加到第二个列表中的那些国家），用户使用添加和删除按钮在这两个列表之间进行转移

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

 < tr> 
< td> 
< select id =preferred_countries_allsize =15style =width：200pxmultiple =multiple> 
< option value =AF>阿富汗< / option> 
< option value =AX>奥兰群岛< / option> 
< option value =AL>阿尔巴尼亚< / option> 
< option value =DZ>阿尔及利亚< / option> 
< option value =AS>美属萨摩亚< / option> 
< option value =AD> Andorra< / option> 
< option value =AO>安哥拉< / option> 
< option value =AI>安圭拉< / option> 
< option value =AQ>南极洲< / option> 
< option value =AG>安提瓜和巴布达< / option> 
< option value =AR>阿根廷< / option> 
< option value =AM>亚美尼亚< / option> 
< option value =AW> Aruba< / option> 
< option value =AU>澳大利亚< / option> 
< option value =AT>奥地利< / option> 
< option value =AZ>阿塞拜疆< / option> 
< option value =BS>巴哈马< / option> 
< option value =BH>巴林< / option> .. 
< / select> 
< / td> 
< td> 
< button style =width：100pxtype =buttonid =preferred_countries_addonclick =add_preferred_countries（）;> 
添加
< / button> 
< br> 
< button style =width：100pxtype =buttonid =preferred_countries_removeonclick =remove_preferred_countries（）;> 
删除
< / button> 
< / td> 
< td> 
< select id =preferred_countries_selectedname =preferred_countries_selectedsize =15style =width：200pxmultiple =multiple> 
< / select> 
< / td> 
< / tr> 
  

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

我在HTM中使用什么而不是两个多选框：在Android手机或iPad以及桌面上都可以使用

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

编辑
这就是我目前为止的内容

 < TR> 
< td> 
 优先发行国家
< / label> 
< / td> 
< td> 
< input disabled =disabledname =preferredCountriesid =preferredCountriestype =textvalue =class =readonlytextinfo> 
< / td> 
< / tr> 
< tr> 
< td class =indentedmultiselectcolspan =2> 
< select id =preferred_countries_selectname =preferred_countries_selectmultiple =multipleonchange =getSelectValues（preferred_countries_select，preferredCountries）> 
< option value =AF>阿富汗< / option><选项值=ZW>津巴布韦< / option> 
< / select> 
< / td> 
< / tr> 
 
< script> 
函数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）+'...'; 
} 
返回结果; 
} 
< / script> 
  

解决方案

。在chrome开发工具（f12）中，您可以模拟移动设备，但最终没有什么能比真正的手机。大多数移动jQuery组件的工作原理是通过隐藏它并显示不同的DOM，在后台更新选择，从而使其与期望选择的表单或其他代码兼容，从而实现真正的选择项目。有些覆盖原始图片以获得正确的移动选择响应，但是视图不同。

In my HTML UI I wanted users to be able to select multiple countries, because there are far too many countries to allow the complete list to be displayed I initiate the HTML page so it has two lists: The second list has just those that have been selected, the first contain all countries (except ones already selected and add to the 2nd list), the user transfer between these two lists using an Add and Remove button

I display 15 rows for each select box by setting size attribute.

<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>

However when I view on an iPad or Phone it only displays one row so you have to click to even see what has already been selected so it no longer works. I can understand why it might do this since space is limited on these devices, and perhaps my use of two select boxes for one option is non-standard but this doesn't work for me as a UI.

What do I use instead of two multiselect boxes in HTM: so works on Android phone or iPad as well as desktop

I had an idea of having one select box that the user could select additional countries, and a disabled text field that shows what has already been selected which is updated as user selects more countries, but how would they unselect values, what is the standard way to do this ?

Edit This is what I have so far

<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>

解决方案

How each solution works on mobile you have to test yourself. In the chrome dev tools (f12) you can simulate mobile but in the end nothing beats a real phone. How most mobile jquery components work is by acting on a real select item by hiding it and showing a different DOM, updating the select in the background, thereby making it compatible with forms or other code expecting a select. Some overlay the original to get the proper mobile select response but a different view.

这篇关于我在html中使用什么而不是两个多选框，所以可以在Phone / Ipad上使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！