ブラウザでリストの選択を行う方法

Question

私はウェブページを持っており、ユーザがリストからあらかじめ定義されたキーワードを選択または選択解除できるようにする必要があります。

ユーザーが定義済みのキーワードのみを選択または選択解除できるstackoverflowでは、以下のタグのようなものがあります。

また、ユーザーがサイトに戻ったときには、自分の古い選択内容を確認していつでも編集できる必要があります。例えば

はそうかもしれない2列は、その後、およびTOからユーザーが前後に2つの列の間で項目を移動できるようにするボタンがあります。この

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

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

のような2つの列を持つことができます。

2つの列ではありませんが、ユーザーが事前定義された単語のみを選択できるようにする方法、キーワードを選択する方法、サイトに戻ったときに後で編集する方法などがあります。

誰でもこの方法を知っていますか？

Answer 1

私は、マルチセレクションのようなライブラリを使用して、クッキーやブラウザのローカルストレージにユーザーの選択を保存することができると思います。

$('#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

Answer 2

高レベルでは、基本的に2つのリスト（JavaScript内）を維持する必要があります.1つは最初の列のすべて、2つ目の列のすべてのものです。

おそらく<select>とmultipleが必要なUIを提供します。リスト内にあるJavaScript（How to populate the options of a select element in javascript）を使用して、これを動的に構築することができます。

彼らはあなたの選択の要素を再レンダリング、その後、チェックされますが、それが含まれている<option>要素をループを見ることができます<select>で、それらを移動他のJavaScriptリストに移動するためのいずれかのボタンをクリックしてください

。 （ How to get all selected values from <select multiple=multiple>?）

ユーザーが戻ったときにリロードする方法はたくさんあります。最も一般的なのはバックエンド開発（Node.JS、PHP、Javaなど）が必要なデータベースに格納することです。

別の方法は、LocalStorageまたはcookiesのいずれかを使用することです。