下記のようなセレクトボックスを作り、値を選択すると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>
1回目にセレクトボックスのC(3番目)を選び、その状態でもう一度セレクトボックスのC(3番)をクリックした時にもう一度上記のjQueryが動くようにしたいです。現在、同じ番号を選ぶ時は1度他の値を選んでから、選びなおさないとajaxが動きません。
jQueryのマウスイベントとしてはclick , dblclick , blur などがありますが、どれを使って実現したら良いのか教えていただければと思います。いろいろ試してみましたが、思ったように動作しませんでした。
ご回答よろしくお願い致します。
No.4ベストアンサー
- 回答日時:
ANo3です。
>1つ目のセレクトボックスが都道府県
>2つ目のセレクトボックスが市区町村
雰囲気として良く見かける住所選択のUIのように思いますが、通常利用されているような方法ではまずいのでしょうか?
>2つ目のセレクトボックス(市区町村)に求める市区町村が登録されていない場合、ajaxのところで、別のajaxをもう一つ動かして、新しく市区町村を登録します。
>この時、2つ目のセレクトボックス(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(表示値はC)が選択された回数」の二つです。
実は、セレクト値は都度セレクト要素を見にゆく方が確実なので記録する必要もなく、記録が必要になるのは回数だけで済むはずなのですが、状態を記録する方法のご参考までに付け加えています。
※イベントがほぼ同時に複数発生するので、発生する毎に状態をコンソールに出力するようにしています。
$(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部分から検討してみたいと思います。市区町村のデータであれば、ご提示頂いたような外部サービスを利用するのもよさそうですね。
ソースの記載、ありがとうございます。イベントごとの処理分岐は使ったことが無かったので、今後の参考にさせていただきます。
今後ともよろしくお願いします。
No.3
- 回答日時:
こんにちは
技術的には、セレクトの状態を監視するようにして、選択の回数などをカウントしておけば良いと思いますが、ANo1様もご指摘のように内容が同じならajaxの処理を繰り返すことに意味がないように思われます。
(時間とともに応答内容が変わるようなものであれば意味はありますが…)
要素を監視するにはchangeイベントやclickイベントを利用すれば可能ではありますが・・・
とは言うものの、ご説明にあるUIにも問題があるように思えます。
通常のマウス操作でセレクト要素を選択しようとした場合、
1)セレクト要素のスピンボタンをクリック
2)表示されたリストから項目を選択してクリック
の手順で選択しますが、この一連の操作で2回のクリックイベントと1回のチェンジイベントが発生します。
順序はckick-change-clickかclick-click-changeのどちらかになるものと想像しますが、手元のfxでは前者でした。
全てのブラウザが同じ順なのかまでは確認していませんが、上記の場合だと最後のクリックイベントが説明なさっているタイミングと一致することになりませんか?
(1回の選択操作をした時にajaxが行われることになる。)
そういうつもりではないって?
では、change直後のクリックは1回だけパスすることにしましょうか。
一旦選択後に、仮に、ユーザが選択内容を変えようとしてセレクト要素をクリックすると、これまたご指定のタイミングに一致することになりますね。(これは、意図通りなのでしょうか?)
一方で、セレクト要素の選択をマウス操作ではなく、キー操作で行った場合は、当然ながらchangeイベントが1回だけ発生することになります。
これらを全て区別して、ユーザの意図通りのタイミングを取得する正確な論理(ロジック)はないものと想像します。
せいぜい、イベントの発生間隔などを計って、コンマ〇秒以下だったら~とか疑似的に想定する程度がいいところではないでしょうか?
複雑になり、苦労する割には報われないことになりそうな気がします。
もともとの目的や状況をまったく理解していないのに大変差し出がましい言い方ですが、操作方法を再考なさったほうがよさそうに感じます。
fujillin様
ご回答ありがとうございます。
作成しているプログラムをもう少し詳しく説明させていただきます。
1つ目のセレクトボックスが都道府県
2つ目のセレクトボックスが市区町村
(この2つ目のセレクトボックスがajax部分)
その下に市区町村入力のテキストボックスがあり、2つ目のセレクトボックスで市区町村を選択すると、テキストボックスに市区町村名が入ります。
1つ目のセレクトボックスで都道府県を選択すると、2つ目のセレクトボックスに該当する都道府県の市区町村リストが表示されます。
2つ目のセレクトボックス(市区町村)に求める市区町村が登録されていない場合、ajaxのところで、別のajaxをもう一つ動かして、新しく市区町村を登録します。この時、2つ目のセレクトボックス(ajax表示部分)が一度消えるようなUIになっています。
1つ目のセレクトボックスで「東京」を選んで、新しい市区町村を登録した時に、1つ目のセレクトボックスは「東京」が表示されたままになっており、現状だと、東京以外の都道府県を選んでから、もう一度「東京」を選ぶような形になってしまっています。
セレクトの状態や選択の回数を監視する部分はどのようなプログラムを書けば良いのか教えていただければと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・「みんな教えて! 選手権!!」開催のお知らせ
- ・漫画をレンタルでお得に読める!
- ・【大喜利】【投稿~1/20】 追い込まれた犯人が咄嗟に言った一言とは?
- ・洋服何着持ってますか?
- ・みんなの【マイ・ベスト積読2024】を教えてください。
- ・「これいらなくない?」という慣習、教えてください
- ・今から楽しみな予定はありますか?
- ・AIツールの活用方法を教えて
- ・【選手権お題その3】この画像で一言【大喜利】
- ・【お題】逆襲の桃太郎
- ・自分独自の健康法はある?
- ・最強の防寒、あったか術を教えてください!
- ・【大喜利】【投稿~1/9】 忍者がやってるYouTubeが炎上してしまった理由
- ・歳とったな〜〜と思ったことは?
- ・ちょっと先の未来クイズ第6問
- ・モテ期を経験した方いらっしゃいますか?
- ・好きな人を振り向かせるためにしたこと
- ・【選手権お題その2】この漫画の2コマ目を考えてください
- ・【選手権お題その1】これってもしかして自分だけかもしれないな…と思うあるあるを教えてください
- ・スマホに会話を聞かれているな!?と思ったことありますか?
- ・それもChatGPT!?と驚いた使用方法を教えてください
- ・見学に行くとしたら【天国】と【地獄】どっち?
- ・これまでで一番「情けなかったとき」はいつですか?
- ・この人頭いいなと思ったエピソード
- ・あなたの「必」の書き順を教えてください
- ・14歳の自分に衝撃の事実を告げてください
- ・人生最悪の忘れ物
- ・あなたの習慣について教えてください!!
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Selectボックスの幅を自動で広...
-
プルダウン 項目が多いので先頭...
-
jQuery セレクトボックスで選択...
-
onFocusOutが複数回呼ばれる!
-
javascriptでselectボックスの<...
-
フォームで開始時間と終了時間...
-
getElementsByNameについて
-
セレクトを全て選択されていな...
-
UWSCのIE操作でプルダウンを選...
-
現在時刻を取得してフォームのs...
-
リストボックスの項目の順番を...
-
ブラウザの戻るボタンを押した...
-
一覧から選択した行の行番号を...
-
value内に変数を入れたい
-
onchangeイベントを強制的に発...
-
ハイパーリンクを別ウインドウ...
-
return trueとreturn falseの用...
-
ラジオボタンにタブインデック...
-
<JavaScript>tableタグを入力不...
-
javascriptでASPにデータを渡す
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウン 項目が多いので先頭...
-
Selectボックスの幅を自動で広...
-
jQuery セレクトボックスで選択...
-
【javascript・PHP】プルダウン...
-
JQuery selectが反映されない
-
CSVファイルを読みこみ、プルダ...
-
Selectの中身をfor文で入れる
-
ブラウザの戻るボタンを押した...
-
フォームで開始時間と終了時間...
-
リストボックスの項目の順番を...
-
javascriptでselectボックスの<...
-
onchange等のイベントハンドラ...
-
現在時刻を取得してフォームのs...
-
jspに組込んだJavaScript でjava文
-
セレクトを全て選択されていな...
-
selectメニューのselectedの位...
-
onFocusOutが複数回呼ばれる!
-
UWSCのIE操作でプルダウンを選...
-
複数のプルダウンの連動とリンク
-
リロード時もコンボボックスの...
おすすめ情報