jQuery で <select multiple> をコピーしたい

Question

xxx 123
yyy 345
zzzzz 78901

みたいに２つのデータを表敬式に表示して
ドラッグや Ctrl+クリックで複数行選択できるセレクトボックスを作りたいのですが
<select multiple> だとボックスの中にスタイルをあてられず
raw text しか出力できず見栄えが悪いので

２つのセレクトボックスを横に並べてスクロール位置と選択状態を一致させることで実現しようと思っています

ただ jQuery になれていなくて選択状態をうまくとりだせません

<div style="display:flex"> <select multiple id="left"> <option value="1">111</option> <option value="2">222</option> <option value="3">333</option> </select> <select multiple id="right"> <option value="1">111</option> <option value="2">222</option> <option value="3">333</option> </select> </div> <script> $('#left').change(function() { src = $('#left > option'); dst = $('#right > option'); src.each((o) => { console.log(o); $("#right [value="+ o.val() +"]").attr("selected", o.attr("selected")) }); }); </script>

というようなサンプルをかいてみたのですが
Uncaught TypeError: o.val is not a function
というエラーが出ます

意図としては value が同じ位置の option のattr の selected 値を代入しようとしてるのですがこの書き方のどこが悪いのでしょうか

あと片方をスクロールしたときもう一方のスクロール位置を一致させるのは簡単にできるでしょうか

Comments

[m.ts10806]

プログラムコード(およびエラーメッセージ)は質問内容としては最も重要な部分であるため、見やすくしていただけると助かります。<code>ボタン押下→「コード」部分にコードを貼り付け→「ここに言語を入力」に対象言語名記入（エラーメッセージの場合は不要）の手順で「コードハイライト化」してください。（質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください）

Answer 1

こんにちは。

意図としては value が同じ位置の option のattr の selected 値を代入しようとしてるのですがこの書き方のどこが悪いのでしょうか

each() の仕様は、以下

https://api.jquery.com/each/

に

.each( function )

function
Type: Function( Integer index, Element element )

A function to execute for each matched element.

と記載されているとおり、 each() に与える関数の第１引数にはインデクスが入ってきます。ですので、以下の部分

src.each((o) => {
  console.log(o);
  $("#right [value="+ o.val() +"]").attr("selected", o.attr("selected"));
});

の、 each((o) => としているところは、each((index,o) => かなと思います。上記だと o にインデクスの整数が入ってきますが 整数のo は o.val() というメソッドは持っていないために

Uncaught TypeError: o.val is not a function

というエラーが発生することになります。

あと片方をスクロールしたときもう一方のスクロール位置を一致させるのは簡単にできるでしょうか

scrollTop　を使えばできます。

　　

参考までに、以下に要件を満たすサンプルを作ってみました。

https://jsfiddle.net/jun68ykt/dj3cvq91/46/

上記の jsFiddleに上げたコードは、ご質問に挙げられているコードとはちょっとやり方が違っていますが、要点は以下です。

• 左右の <select> それぞれに 30個の <option> を作ります。(スクロールさせるため)

　　

• 左右いずれの <select> でも change が発生したら、他方の<select> の選択状態の<option>を同じにします。方法としては、以下のようにしています。

$(`#${otherSelectId}`).val($(this).val());

上記にて、コピー元<select>である $(this) の .val() で取得できる配列を、コピー先<select>に.val(values) で与えて、選択状態になる値を更新しています。

• 左右いずれの <select> でも scroll が発生したら、他方の<select>も同じ位置にスクロールさせます。

以上、参考になれば幸いです。

---

追記

回答にサンプルとして挙げた jsFiddle のコードを、 FireFox v61 で開くと問題なく動作しましたが、Chrome v68 だと、スクロール後に <option>をクリックしたときにスクロール位置が勝手に移動してしまい、違和感のある動作になってしまうことがあります。（ブラウザによって挙動が異なるという意味では、ちょっと微妙なやり方なのかもしれません。）

Comments

[退会済みユーザー]

jQuery の $each は第1引数がindexだったんですね…
map や forEach と混同してました…

わざわざコードまで書いていただいてわかりやすい回答ありがとうございました
ただ自分でも試してみたんですがスクロールした後の選択で位置がずれるのがけっこう大きな問題なのでこの方法では実現が難しそうなので別の方法を考えることにします

option の中には HTML がかけないけど option 自体にはスタイルがきくみたいなので
２列に並べて偶数番目奇数番目を教えていただいた方法で連動させれば実現できるかなと
スクロールバーも右端だけになるので見栄えもよくなりそうだし

[jun68ykt]

> 混同してました…

紛らわしいですね、 JS標準のforEach に慣れると、JQuery のeach もそのように書いてしまいますね。私も時々やります。

> 別の方法を考えることにします

よい回答のコードが書けた！と思ったのですが、Chrome での動きが微妙なのを発見して、orz って感じでした。。。

> ・・・見栄えもよくなりそうだし

とりあえず、前に進めそうでよかったです。