6

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>
Paul Taylor
  • 13,411
  • 42
  • 184
  • 351
  • Wouldn't it be easier to do this with two lists of Checkboxes? And on "Add" or "Remove" you move the checked items around? Then you could also style it as you like. – niorad Jan 24 '18 at 15:48
  • Here's an example codepen: https://codepen.io/niorad/pen/wpbjLj You can also style the checkboxes easier than you could selects. – niorad Jan 24 '18 at 15:56
  • Added the suggestion as solution. – niorad Jan 24 '18 at 16:02

3 Answers3

1

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.

JGoodgive
  • 1,068
  • 10
  • 20
  • I think select2 looks like a good project that works well on mobile. Just visit the link oh your phone. Multiselect at the bottom. https://select2.org/getting-started/basic-usage – JGoodgive Jan 19 '18 at 12:00
  • I'm still not clear why mobile browsers do this, is it a function of the screensize or the browser, is it controllable ? – Paul Taylor Jan 19 '18 at 13:06
  • @JCoodgive seems to have a fatal flaw that you can only pick one item at a time so would be nightmare if you wanted to select everything – Paul Taylor Jan 19 '18 at 22:09
  • Well make a wishlist and google it. Hard for me to tick all the boxes without knowing exactly how it will be used and what you find important. Checking all boxes is still going to be a lot of tapping on a cell phone. Maybe there is another component that solves your task better? – JGoodgive Jan 19 '18 at 22:24
  • I still dont understand why simply viewing a on a phone/ipad causes such a drastic change to how a multiselect box works. I have partially created a my own solution, I use a regular multiselect box but also have a text field that is updated with anything selected so user can see what they have selected without the multiselect being open. trouble is now with formatting the text field to look good with varying number of items selected – Paul Taylor Jan 23 '18 at 13:48
  • I agree it is irritating and frustrating but some one decided that small phones could not handle a large component and that seeing one line was totally enough. I disagree and built my own component for my last employer that had that exact need. I would in your case build a component of it that has one multiselect connected with a div showing divs (with inline-block) as "pebbles" with chosen values. Add a cross to remove selections and it sounds like a decent component to me. I would add the select element on top so that large lists don't make it diffcult to use and a clear all button. – JGoodgive Jan 23 '18 at 15:19
  • I have added what I have so far (html and javascript) function this works but not that well, perhaps you coud help me improve it. – Paul Taylor Jan 23 '18 at 16:46
0

What you are asking for cannot be done natively with select boxes. The Mobile browsers will do as they please. I suggest you take a good google for free good components that solve your problem instead.

Such as:

or other depending on your choice of library/framework. if you give us more information on you library stack we might guide you better.

JGoodgive
  • 1,068
  • 10
  • 20
  • Hi, thankyou they both look like good possible options, but are you sure they will continue to work like that on mobile browser and can you explain why mobile browser makes such a radical change. My stack is quite minimal, I do use JQuery a little but but Im always hesitant to use it as I dont really understand it, in addition I use my own Javascript and CSS and nothing else. ALthough web application it only runs locally on users machine, I only need the solution to work with recent browsers I have no need to support browsers form years ago. – Paul Taylor Jan 19 '18 at 10:14
  • For example multiselect.js still seems to use a select box and looks like a mopre advanced version of my original solution so wouldnt it have the same issue on a mobile browser ? – Paul Taylor Jan 19 '18 at 10:15
  • So Chosen doesn't work on mobile device, multiselect.js is confusng when first load the example page it doesnt seem to work but if you zoom in then it does work (but why not on first load) – Paul Taylor Jan 31 '18 at 10:20
0

You could do this with two lists of checkboxes. It's much easier to style that way, and you have pretty much the same amount of control.

niorad
  • 1,330
  • 10
  • 14
  • Interesting idea, but with 140 countries its not really a practical solution – Paul Taylor Jan 26 '18 at 12:10
  • Where's the difference in having 140 entries in a select-list or as a checkbox-list? – niorad Jan 27 '18 at 10:57
  • As I understand it in a checkbox list they would all be displayed on screen at same time taking up a lot of space, whereas with a select-list it is scrolling so only a few are displayed at a time – Paul Taylor Jan 27 '18 at 16:37
  • You can add some CSS to keep the containers in a fixed height, and force scrolling. I updated the codepen-example from the answer to show an example. – niorad Jan 27 '18 at 21:06
  • Sorry I dont like it, prefer a select/list – Paul Taylor Jan 31 '18 at 10:22
  • I meant what could i use instead of the standard select since that doesnt work for this use case on mobile. – Paul Taylor Jan 31 '18 at 14:35