How to mkae a list chooser in a browser

Question

I have a webpage and I need to allow the user to select or de-select from predefined keywords from a list.

Something like the tags below in stackoverflow where the user can only select or de-select predefined keywords.

Also when the user returns to the site, he must be able to see his old selections and edit them at anytime.

For example maybe can have two columns like this

UNSELECT     SELECTED
-------------------
A
B
C
              D
E
              F
G

[ --> ] select button
[ <-- ] unselect button

So there are two columns FROM and TO, then buttons allowing the user to move items back and forth between the two columns.

Doesnt have to be two columns, but any method that allows the user to only select predefined words, se-select any keyword, and can edit them later when they return to the site.

Anybody knows how to do this?

What have you done to try this? StackOverflow isn't for doing work for you, it's for helping work out the kinks in work you've done. — samanime, Sep 20 '17 at 21:00
Yes i understand, but i have no clue on how to even start to do it, i dont even know what to search for in google — Paul Man, Sep 20 '17 at 21:02
Just like any other programming problem, you'll have to break it down into parts. I'll give an answer which helps give you a breakdown conceptually of where to start. From there, you can try working on the code and asking additional questions when you get stuck. — samanime, Sep 20 '17 at 21:04
Maybe there is a plugin already that can do it, i dont really want to code it becuase i have a much bigger project to work on and this is just a tiny fraction of it — Paul Man, Sep 20 '17 at 21:07
StackOverflow rules explicitly prohibit us from specifying particular plugins and libraries, as those are always opinionated, and StackOverflow is for concrete answers. Try Googling something like "move options between two lists", there may be some options out there. — samanime, Sep 20 '17 at 21:11

score 0 · Answer 1 · answered Sep 20 '17 at 21:10

At a high-level, you'll basically want to maintain two lists (in JavaScript), one for everything in the first column, one for everything in the second column.

Probably a <select> with multiple will give you the UI you want. You can build this dynamically using the JavaScript you have in the lists (How to populate the options of a select element in javascript).

When they click one of the buttons to move them, with a <select> you can loop through the <option> elements it contains, see which are checked, move them to the other JavaScript list, then re-render your select elements. (How to get all selected values from <select multiple=multiple>?)

As for making them reload when users come back, there are lots of ways to do that. The most common would be to store it in a database, which would require back-end development (Node.JS, PHP, Java, etc.).

Another way would be to use either LocalStorage or cookies.

Thanks for the hints, do you happen to know if there is a plug in or code already out there i can use? Im sure somebody in the worlds already did it before. Do you know what its called so i can search for it on google? Cant use cookies because the user can access it from different browsers or even his phone and then it will get messed up. — Paul Man, Sep 20 '17 at 21:12

score 0 · Accepted Answer · answered Sep 20 '17 at 21:16

I guess you can use a library like multiSelect, and save user selection to a cookie or browser's local storage.

$('#callbacks').multiSelect({
  afterSelect: function(values) {
    alert("Select value: " + values);
  },
  afterDeselect: function(values) {
    alert("Deselect value: " + values);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/css/multi-select.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/js/jquery.multi-select.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/css/multi-select.css" rel="stylesheet" />


<select id='callbacks' multiple='multiple'>
  <option value='elem_1'>elem 1</option>
  <option value='elem_2'>elem 2</option>
  <option value='elem_3'>elem 3</option>
  <option value='elem_4'>elem 4</option>
  <option value='elem_100'>elem 100</option>
</select>

jsfiddle

How to mkae a list chooser in a browser

2 Answers2