0

画面に支払日というコンボボックスがあり、その値はDB処理から取得した値で設定しています。設定後、初期値としてはサーバーサイド側で処理した値を表示するようにしています。
そして、その支払日コンボボックスのchangeイベント発生でchangeイベントの受け取るパラメタとして初期値として表示したサーバーサイド側で処理した値が渡ってくると思いきやDBから取得した値が何度も渡ってchangeイベントの処理が繰り返し実行されているため画面の表示が意図したものと違う形になってしまいます。
どういったことが原因であると考えられますでしょうか。初期値として表示したサーバーサイド側で処理した値のみをchangeイベントへのパラメタとして渡ってchangeイベントが行われるのが理想です。

コードの例:

支払日コンボボックス.change(function(event){
  // ここでvalメソッドで取得した値がDB処理から取得した値になってしまう。

●処理の流れ
・画面の初期表示時、Ajaxを使用しDBから取得した値をJSで受け取り支払日コンボボックスに設定し、初期表示の値にサーバーサイド側で処理した値を表示
・支払日コンボボックスのchangeイベント処理発生

1
  • kazu さん、タグに java とありますがそうではなくて、これは javascript に関するご質問ではないでしょうか?
    – nekketsuuu
    Commented 2018年7月12日 16:02

1 件の回答 1

1

changeイベント発生でchangeイベントの受け取るパラメタとして初期値として表示したサーバーサイド側で処理した値が渡ってくると思いきやDBから取得した値が何度も渡って

サーバーサイド側で処理した値DBから取得した値というところの意味がわかっていませんが、どちらの値でも一度 HTML上で<select></select>にしてしまえば、

以下のように、changeの関数内で、$("option:selected", this)の値(text()やval())を取得すれば変更された<option/>の値を取得できると思います。

$("select").change(function () {
    var str = $("option:selected", this).text() + ":" + $("option:selected", this).val()
    $( "div" ).text( str );
})
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<select name="sweets" >
  <option value="1">Chocolate</option>
  <option value="2">Candy</option>
  <option value="3">Taffy</option>
  <option value="4">Caramel</option>
  <option value="5">Fudge</option>
  <option value="6">Cookie</option>
</select>

<h2>選択結果</h2>
<div></div>

参考: jquery select change event get selected option

2
  • $("option:selected", this)を使ってみたのですがやはりDB処理から取得した値がなぜか$("option:selected", this).val()でとってこれてしまっています。そして、支払日コンボボックスにDBから取得した値を設定する時点でchangeイベントが発生してしまう形になってしまいます。
    – kazu
    Commented 2018年7月14日 2:28
  • @kazu 支払日コンボボックスのセットアップ直前に$("select").off("change")でイベントハンドラを解除し、DBから取得した値で支払日コンボボックスのセットアップが済んだ後に、$("select").change...でイベントハンドラを登録すれば改善できるかもしれません。
    – user28902
    Commented 2018年7月14日 23:57

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。