質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

1912閲覧

JavaScriptで複数のOption要素の入れ替えについて

limitman80

総合スコア40

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2018/02/07 07:59

以下のようなリストがあり、複数選択後、上ボタンを押下すると入れ替えれるようにしたいです。

HTML

1<select id="test_list" name="test_list" size="5"> 2 <option value="1">1</option> 3 <option value="2">2</option> 4 <option value="3">3</option> 5 <option value="4">4</option> 6 <option value="5">5</option> 7</select>

上記の場合に4と5を選択している時に上ボタンを押下すると

HTML

1<select id="test_list" name="test_list" size="5"> 2 <option value="1">1</option> 3 <option value="2">2</option> 4 <option value="4">4</option> 5 <option value="5">5</option> 6 <option value="3">3</option> 7</select>

のようにしたいと思います。
良い方法はありませんでしょうか?

1番上を選択している場合は上ボタンは無効です。

宜しくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2018/02/07 08:08 編集

上ボタンってinput type=buttonですか?
limitman80

2018/02/07 08:07

<button type="button" onclick="UPOPTION()">上</button>で考えてます。
yambejp

2018/02/07 08:08

また複数選択はmultipleですよね?「4と5」を3の上に移動するのはわかるのですが仮に「2と4」を選んで上に移動する場合どうしたいのでしょうか?
limitman80

2018/02/07 08:10

「2と4」の場合は2~4にしないと無理ですね。間のも含めて移動します。
yambejp

2018/02/07 08:11

つまり選択範囲は常に連続しているということでよいですね?
limitman80

2018/02/07 08:12

はい。その認識で問題ありません。
guest

回答2

0

ベストアンサー

JavaScript

1function UPOPTION() { 2 $('#test_list option:selected').each(function(index, element) { 3 var target = $(element); 4 var prev = target.prev(); 5 6 if (!prev.length || prev.is(':selected')) { 7 return; 8 } 9 10 prev.before(target); 11 }); 12}

投稿2018/02/07 08:43

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ざっくりやってみました

javsacript

1$(function(){ 2 $('#test_list').on('change',function(){ 3 var flg=$(this).find('option:selected').length==0 || 4 $(this).find('option:first').prop('selected'); 5 $('#up').prop('disabled',flg); 6 if($(this).find('option:selected').length>=2){ 7 for(var i=$(this).find('option:selected:first').index()+1;i<$(this).find('option:selected:last').index();i++){ 8 $(this).find('option').eq(i).prop('selected',true); 9 } 10 } 11 }).trigger('change'); 12 $('#up').on('click',function(){ 13 $('#test_list option:selected:last').after($('#test_list option').eq($('#test_list option:selected:first').index()-1)); 14 $('#test_list').trigger('change'); 15 }); 16});

HTML

1<select id="test_list" name="test_list" size="8" multiple> 2<option value="1">1</option> 3<option value="2">2</option> 4<option value="3">3</option> 5<option value="4">4</option> 6<option value="5">5</option> 7<option value="6">6</option> 8<option value="7">7</option> 9<option value="8">8</option> 10</select> 11 12<input type="button" value="up" id="up"> 13

投稿2018/02/07 08:29

yambejp

総合スコア114505

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問