いつもお世話になっています。
2段階のプルダウン選択で検索ボタンを押すと、
金額が表示されるフォームがあります。
このフォームで、
プルダウン1つのみ選択、または2つとも選択せずに検索を押すと、「undefined」と出てしまいます。
2つのプルダウンを選択した上で検索ボタンを押さないと、「××を選択してください!」というようなエラー表記を出すようにしたいのですが、自力ではむずかしいため、こちらへ質問させていただきました。
ご教授ください。
以下、ソースです。
【html】
<table>
<tr>
<td class="select-field-todofuken">
<select name="todofuken" onchange="todofukenSet()" class="todofuken" id="pref">
<option value="">【都道府県を選択】</option>
<option value="">東京都</option>
<option value="">神奈川県</option>
</select>
</td>
<td class="select-field-sikuchoson">
<select name="kuchoson" id="sikuchoson">
<option value="">【市区町村を選択】</option>
</select>
</td>
<td class="select-field-search">
<p id="image-btn"><img src="image/btn_area_search.png" alt="検索" class="rollover"></p>
</td>
</tr>
<tr>
<td colspan="3" class="result-field">
<dl class="result">
<dt>あなたの住所は</dt>
<dd class="result-money"><div id="deli-price"></div></dd>
</dl>
</td>
</tr>
</table>
【js】
function getCityNum(pref) {
var select_list;
for ( i=0; i<pref.length; i++ ){
select_list += '<option value="">' + pref[i] + '</option>';
}
$("#sikuchoson").html(select_list);
}
$(function() {
$("#pref").change(function(){
if ($("#pref option:selected").text() == '東京都') {
getCityNum(tokyo_todofuken);
} else if ($("#pref option:selected").text() == '神奈川県') {
getCityNum(kanagawa_todofuken);
}
});
//ボタンを押すと選ばれた値をわたす
$("#image-btn").click(function () {
var selected = $("#sikuchoson option:selected").text();
if ($("#pref option:selected").text() == '東京都') {
var data = tokyo[selected];
} else if ($("#pref option:selected").text() == '神奈川県') {
var data = kanagawa[selected];
}
//金額を表示
$("#deli-price").html("<span>"+data+"円</span>");
});
});
以上です。
割愛していますが、金額の数字は配列から引っ張るようになっています。
なにとぞよろしくお願い致します。
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
う~~ん
いろいろ疑問点が多いのですが…
・HTMLで定義されている、onchangeは意味があるのだろうか?(エラー出てませんか?)
・select要素の値は、通常はvalue値を利用すると思うのだけれどなぜtextなのか
・これだけクラス設定とかあればidを設ける必要もなさそう
・どうやって配列定義をしているのか不明だけれど、都道府県の選択肢は2個限定?
(それぞれ、違う変数になっているみたいですけれど)
まぁ、それは別として、
>または2つとも選択せずに検索を押すと、「undefined」と出てしまいます。
2つに値が設定されていることをチェックすればよろしいかと。
チェック方法はいろいろ考えられますが、各optionの最初のものは選定対象外(【選択の標記】)になっているとするならば、それ以外が選択されていればOKということで
if( $("#pref").attr("selectedIndex") && $("#sikuchoson").attr("selectedIndex"))
みたいな条件判定でいけるのではないでしょうか?
きちんとやるなら値を確認してってことになるのかも知れませんが、value値には何も入って無い様なので…
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript JavascriptからSQLへ繋ぎ方が分からない 3 2022/07/07 00:27
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
セレクトメニューで選択された...
-
ラジオボタンとドロップダウン...
-
プルダウン 項目が多いので先頭...
-
jQuery セレクトボックスで選択...
-
html selectの内容を初期値に戻す
-
ラジオボタンでポップアップメ...
-
グーグルマップの初期表示地点...
-
SELECTの生成でselected設定が...
-
セレクトを全て選択されていな...
-
javascriptでHTMLを絞り込み検...
-
jquery での <select multiple=...
-
CSVファイルを読みこみ、プルダ...
-
onchange等のイベントハンドラ...
-
正規表現で複数マッチ条件で悩...
-
ボタン2回押しを無効にしたい
-
<form action="#">の意味とは?
-
<td>の中のonClick="location" で
-
JavaScriptにて動的に配列を作...
-
背景色を変えて未入力チェック...
-
【jsp/Java】チェックボックス...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウン 項目が多いので先頭...
-
Selectボックスの幅を自動で広...
-
Selectの中身をfor文で入れる
-
html selectの内容を初期値に戻す
-
CSVファイルを読みこみ、プルダ...
-
セレクトを全て選択されていな...
-
ブラウザの戻るボタンを押した...
-
JQuery selectが反映されない
-
jQuery セレクトボックスで選択...
-
セレクトの値を取得できない
-
テーブルにおける行(セルにプル...
-
現在時刻を取得してフォームのs...
-
javascriptでの2つのプルダウン...
-
document.form で nullまたは...
-
リストボックスの項目の順番を...
-
onFocusOutが複数回呼ばれる!
-
javascriptでselectボックスの<...
-
プログラムがうまく動きません...
-
親子連動型のselectを設置し、...
-
selectタグに直接onChangeを書...
おすすめ情報