ユーザーが選択ボックスでソートできるようにする

Question

私は、ユーザーがテーブルに保存された行を並べ替えることができるようにするために、未知の選択ボックスを持っています。

https://jsfiddle.net/rutnceL7/2/

Orange 
<select name="nr[]" onchange="sortselect(this.id);"> 
<option value="1" selected>1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
</select><br>Green 
<select name="nr[]" onchange="sortselect(this.id);"> 
<option value="1">1</option> 
<option value="2" selected>2</option> 
<option value="3">3</option> 
</select><br>Blue 
<select name="nr[]" onchange="sortselect(this.id);"> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3" selected>3</option> 
</select><br> 

純粋なJavascriptを使用することが可能です（またはjQueryのを、私はJavascriptを好む）これを実現するために： - ユーザーが取る この例では、私は、ユーザーがソート自分の好きな色をしましょう緑色（2箇所）を1位に変更します。 - 次にjavascriptは最初の場所がどこにあるかを見つけて、1位から2位に変更します（前に緑が2だったので）。

したがって、ユーザーが選択する番号が切り替わります。これは簡単な方法で可能ですか？

私はgoogle（とstackoverflow）で検索しようとしましたが、何も見つかりませんでした。私はプログラミングをするのが好きではありませんが、どこから始めるべきかわかりません。

Answer 1

あなたは近くです！あなたが話しているのは、DOM操作です。本質的にjavascriptのために作られたものです。

まず、idでクエリするために、要素にidを設定しないでください。これは設定と同じくらい簡単です<select id='foo'>

各選択IDは、スクリプト内で参照できるように一意でなければなりません。

次に、あなたが設定したDOM onchangeを変更する必要がありますが、実際の変更は行っていません。 DOMに要素を追加したり削除したりする必要があります。 element.appendChild(child)を使用できます。ここで、 'element'は追加するターゲットで、 'child'は追加する要素です。より良い理解を得るためには、MDNリファレンスを読むべきです（https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild）。 .removeChild()と.replaceChild()も同様の方法で動作し、興味のあるかもしれません。

注意しなければならないことは、上記の関数の多くで実際のhtml要素を '子'として使用する必要があることです。つまり、ユーザーが選択した要素を識別し、その要素に基づいて並べ替える必要があります。配列に値を['Orange', 'Green', 'Blue']の順に設定し、変更時に配列を並べ替えるロジックを実行し、配列の状態に基づいて再レンダリングする方が簡単かもしれません。

概念的には複雑に聞こえますが、実際には思うよりも簡単です。幸運:)