boostrap3 セレクトボックスの個々のselected値を個々に設定したい

Question

現状

Boostrap3とjavascriptを使用して下記の様にselectボックスを記述しています。
$('[name="template_id[]"]').on('change' {で取得しているのですが、どうしても個々に設定されずこまっています。
どなたかアドバイスをお願いします。

実現したい事

1番目、2番目…と個々にセレクトされた値を取得及び設定したいです。
また、前回selectedされたものは削除したいです。

<ul class="list ui-sortable" id="addPoint">

<li class="list-item ui-sortable-handle" >
<div class="col-me-10">
<select class="form-control" name="template[]" id="target">
 <option value="0">aaa</option>
 <option value="1">bbb</option>
 <option value="2">ccc</option> 
</select>
</div>
</li>

<li class="list-item ui-sortable-handle" >
<div class="col-me-10">
<select class="form-control" name="template[]" id="target">
 <option value="0">aaa</option>
 <option value="1">bbb</option>
 <option value="2">ccc</option> 
</select>
</div>
</li>

<li class="list-item ui-sortable-handle" >
<div class="col-me-10">
<select class="form-control" name="template[]" id="target">
 <option value="0">aaa</option>
 <option value="1">bbb</option>
 <option value="2">ccc</option> 
</select>
</div>
</li>

</ul>

var oldSelectedVal = '';
$('[name="template_id[]"]').on('change', function() {
  var selectedVal = $(this).val();

if (oldSelectedVal != '') {
        $(this).children('[name="template_id[]"] option[value="' + oldSelectedVal + '"]').attr('selected', false);
      }

      $(this).children('[name="template_id[]"] option[value="' + selectedVal + '"]').attr('selected', true);
      oldSelectedVal = selectedVal;
});

Answer 1

こんばんは。
まずはいくつかタイポがあるので見直しをお願いします。

• selectタグ nameがmaneになっています
• selectタグ mane=template[]" は name="template[]" ですね。 属性名がmaneになっているのと "で囲む必要があります
• JS onchangeのイベントで name="template_id[]" を指定されていますが、template_idのname属性はHTMLにありませんのでこのイベントは発火しないですね

また、実現したいことがよくわからなかったのですが、前回selectedされたものは削除したいということはどういうことでしょうか。

1個目でaaaをセレクトしたら、2個めと3個めのセレクトタグからaaaを消したいということですかね？

Comments

[t-ju]

8zca様

誤記指摘ありがとうございます、修正しました。
また説明が下手で申し訳ありません。

１つ目のセレクトボックスの値が変更されたら選択した値にselectedを付与し、前回選択したselectedは削除したいです。
現行ですと、1つ目のセレクトボックスを変更すると2＆3番目もselectedがついてしまいます。
どのようにしたら1つ1つのセレクトボックスを制御できるかを知りたいです。
また、前回選択した際に付与したselectedが消えてくれません。

[8zca]

セレクトボックスを変更した場合、JSで特に制御しなくても選択したoptionがselected状態になります。
htmlファイルとjsファイルにそれぞれ以下を追記してみてください。
```HTML
<button name="btn">click</button>
```

```JavaScript
$('[name=btn]').click(function() { // ボタンクリックしたら
$('[name="template[]"]').each(function() { // name="template[]" をもつ要素をループ
alert($(this).val()); // 選択されているvalueをalertで出す
})
});
```
ボタンをクリックすると最初は0, 0, 0とアラートボックスが出ると思います。
その後2つ目のセレクトボックスをbbbに変更してボタンをクリックすると0, 1, 0と出ると思います。
独立して制御されている証拠です。

2つ目のセレクトボックスを変更して1,3番目のセレクトボックスも同じ値になるのでしたらおそらく他のJSが作用していると思いますので、記載していただいているコードだけでは確かな回答はできないですね・・。

[8zca]

補足ですが、

$(this).children('[name="template_id[]"] option[value="' + selectedVal + '"]').attr('selected', true);

の $(this) は select要素を指しています。
配下のoptionを指定する場合は
$(this).children("option[value=0]")
でとれます。

また、selectedを変更したい場合は attrではなくprop を使いましょう。

[t-ju]

8zca様

回答有難うございます。
試してみます。

[t-ju]

8zca様

まだこのスレッドをみていたら回答をお願いしたいのですが…
アドバイス頂いた下記ですと、セレクトボックスから値を選択前後に
イベントが発火し新たに選択したselectedも消えてしまいます。
セレクトボックスの選択前のみイベントを発火させ、前選択されたselectedのみ削除する方法はありませんか？
よろしくお願い致します。

$('[name="template_id[]"]').click(function() {

[8zca]

こんばんは。
selectedが消えたのをどう確認されているか教えてもらっていいでしょうか？chromeのデベロッパーツール等でしょうか。
また、この制御をすることで最終的に何をしようとされているかを教えていただいてもよいでしょうか。
selectedの付け替えは通過点だと思うので、それができた上で何をしたいのかが知りたいです。