jQuery セレクトボックスで選択されている値をもう一度選んだ時、イベントを実行させる方法

下記のようなセレクトボックスを作り、値を選択するとAjaxで下にあるdivにデータが表示されるプログラムを作成しています。この動作は下記のjQueryでうまく動いています。

//セレクトボックス
<select name=“SampleName” id=“SampleId”>
<option value=""></option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
<option value="5">E</option>
</select>

//Ajax表示スペース
<div id=“Ajax”>内容をAjaxで表示</div>

//jQuery
<script type="text/javascript">
$(function() {
$(document).on('change', '#SampleId', function (e) {
〜 Ajaxの処理　（省略）
});
});
</script>

１回目にセレクトボックスのC(3番目）を選び、その状態でもう一度セレクトボックスのC(3番）をクリックした時にもう一度上記のjQueryが動くようにしたいです。現在、同じ番号を選ぶ時は1度他の値を選んでから、選びなおさないとajaxが動きません。

jQueryのマウスイベントとしてはclick , dblclick , blur などがありますが、どれを使って実現したら良いのか教えていただければと思います。いろいろ試してみましたが、思ったように動作しませんでした。
ご回答よろしくお願い致します。

No.4 ベストアンサー 回答者： fujillin 回答日時： 2016/09/09 11:36

ANo3です。

＞１つ目のセレクトボックスが都道府県
＞２つ目のセレクトボックスが市区町村
雰囲気として良く見かける住所選択のＵＩのように思いますが、通常利用されているような方法ではまずいのでしょうか？

＞２つ目のセレクトボックス（市区町村）に求める市区町村が登録されていない場合、ajaxのところで、別のajaxをもう一つ動かして、新しく市区町村を登録します。
＞この時、２つ目のセレクトボックス(ajax表示部分)が一度消えるようなUIになっています。
＞　　～～～
＞現状だと、東京以外の都道府県を選んでから、もう一度「東京」を選ぶような形になってしまっています
求めるものがあるのかないのかはユーザでないと判断できないと思いますが、その時の操作（例えば新規登録のボタンを押すとか）をトリガーとして登録モードに切り替えれば良いので、1つ目のセレクトボックスを操作しなければならない理由がわかりません。
逆に、1つ目のセレクトボックスを操作できてしまうと、別の県を選択して登録するといった変な操作が可能になり、二重登録や誤操作など、いろいろ問題の原因になりそうな気もしますが…
というよりも、そもそも論になってしまいますが、ユーザに登録させるってどうなんでしょう？
登録の内容が正しいか等のチェックはどのように行っているのでしょうか？

都道府県、市区町村と（数は多くても）限定できる対象のようですので、それなりのデータを用意すれば済むのではないかと想像します。
自前のデータだとメンテが面倒とかであれば、世の中を探せばそれなりのサービスもあるので、それらを利用するという方法もあるのではないでしょうか。
以下簡単な検索で引っかかったもの。（ちゃんと探せばもっとあるでしょう）
http://techblog.yahoo.co.jp/web/yahoo_open_local …
http://www.soumu.go.jp/denshijiti/code.html
http://www.ekidata.jp/api/api_pref.php


＞セレクトの状態や選択の回数を監視する部分はどのようなプログラムを書けば良いのか教えていただければと思います
単純に、状態を記録する変数を用意しておいて、必要なときに参照するようにすればよろしいと思います。
簡単な例を以下にあげておきますが、記録しているのは、例として「セレクトの選択状態（インデックス値）」と「インデックス3（表示値はＣ）が選択された回数」の二つです。
実は、セレクト値は都度セレクト要素を見にゆく方が確実なので記録する必要もなく、記録が必要になるのは回数だけで済むはずなのですが、状態を記録する方法のご参考までに付け加えています。

※イベントがほぼ同時に複数発生するので、発生する毎に状態をコンソールに出力するようにしています。

$(function(){
var count = 0, index = 0;
$("#SampleId").on("click change", function(e){
if(e.type == "change"){
index = this.selectedIndex;
count += (index == 3)?1:0;
}
var mes = "種類=" + e.type + "　インデックス値=" + index + "　Cの選択回数=" + count;
console.log(mes);
});
});

この回答へのお礼

fujillin様

ご返答ありがとうございます。今回のシステムのユーザーは実質は数名で（ユーザーというより数名のサイト管理者）なのでデータのチェック部分は問題無い感じの運用です。
ご指摘のように現在のUIがあまりよくないので、もう一度UI部分から検討してみたいと思います。市区町村のデータであれば、ご提示頂いたような外部サービスを利用するのもよさそうですね。

ソースの記載、ありがとうございます。イベントごとの処理分岐は使ったことが無かったので、今後の参考にさせていただきます。
今後ともよろしくお願いします。

お礼日時：2016/09/10 23:46

No.3 回答者： fujillin 回答日時： 2016/09/08 16:18

こんにちは

技術的には、セレクトの状態を監視するようにして、選択の回数などをカウントしておけば良いと思いますが、ANo1様もご指摘のように内容が同じならajaxの処理を繰り返すことに意味がないように思われます。
（時間とともに応答内容が変わるようなものであれば意味はありますが…）

要素を監視するにはchangeイベントやclickイベントを利用すれば可能ではありますが・・・
とは言うものの、ご説明にあるＵＩにも問題があるように思えます。
通常のマウス操作でセレクト要素を選択しようとした場合、
1）セレクト要素のスピンボタンをクリック
2）表示されたリストから項目を選択してクリック
の手順で選択しますが、この一連の操作で2回のクリックイベントと1回のチェンジイベントが発生します。

順序はckick-change-clickかclick-click-changeのどちらかになるものと想像しますが、手元のfxでは前者でした。
全てのブラウザが同じ順なのかまでは確認していませんが、上記の場合だと最後のクリックイベントが説明なさっているタイミングと一致することになりませんか？
（1回の選択操作をした時にajaxが行われることになる。）

そういうつもりではないって？
では、change直後のクリックは1回だけパスすることにしましょうか。
一旦選択後に、仮に、ユーザが選択内容を変えようとしてセレクト要素をクリックすると、これまたご指定のタイミングに一致することになりますね。（これは、意図通りなのでしょうか？）
一方で、セレクト要素の選択をマウス操作ではなく、キー操作で行った場合は、当然ながらchangeイベントが1回だけ発生することになります。

これらを全て区別して、ユーザの意図通りのタイミングを取得する正確な論理（ロジック）はないものと想像します。
せいぜい、イベントの発生間隔などを計って、コンマ〇秒以下だったら～とか疑似的に想定する程度がいいところではないでしょうか？
複雑になり、苦労する割には報われないことになりそうな気がします。


もともとの目的や状況をまったく理解していないのに大変差し出がましい言い方ですが、操作方法を再考なさったほうがよさそうに感じます。

この回答へのお礼

fujillin様

ご回答ありがとうございます。
作成しているプログラムをもう少し詳しく説明させていただきます。

１つ目のセレクトボックスが都道府県
２つ目のセレクトボックスが市区町村
（この２つ目のセレクトボックスがajax部分）
その下に市区町村入力のテキストボックスがあり、２つ目のセレクトボックスで市区町村を選択すると、テキストボックスに市区町村名が入ります。
１つ目のセレクトボックスで都道府県を選択すると、２つ目のセレクトボックスに該当する都道府県の市区町村リストが表示されます。

２つ目のセレクトボックス（市区町村）に求める市区町村が登録されていない場合、ajaxのところで、別のajaxをもう一つ動かして、新しく市区町村を登録します。この時、２つ目のセレクトボックス(ajax表示部分)が一度消えるようなUIになっています。

１つ目のセレクトボックスで「東京」を選んで、新しい市区町村を登録した時に、１つ目のセレクトボックスは「東京」が表示されたままになっており、現状だと、東京以外の都道府県を選んでから、もう一度「東京」を選ぶような形になってしまっています。

セレクトの状態や選択の回数を監視する部分はどのようなプログラムを書けば良いのか教えていただければと思います。

お礼日時：2016/09/09 01:19

No.2 回答者： yambejp 回答日時： 2016/09/08 09:38

ちなみに全角のクォーテーションはつかわないでください

No.1 回答者： yambejp 回答日時： 2016/09/08 09:24

なにも変わっていないのならとってくるajaxの値も同じでは？

clickで実装できると思いますが、clickなので触った時と選んだ時の2度
イベントが発動します

この回答へのお礼

yambejp様

ご回答ありがとうございます。
ajaxの取得データは毎回違ったものを想定していました。説明不足で申し訳ありません。
clickで2回イベントが発動し、求めるデータが取得できることが確認できました。
ありがとうございました。

お礼日時：2016/09/09 00:49