エラー表記を追加したい

質問

いつもお世話になっています。

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>");
});

});

以上です。
割愛していますが、金額の数字は配列から引っ張るようになっています。
なにとぞよろしくお願い致します。

回答No.1

fujillin

う～～ん

いろいろ疑問点が多いのですが…
　・HTMLで定義されている、onchangeは意味があるのだろうか？（エラー出てませんか？）
　・select要素の値は、通常はvalue値を利用すると思うのだけれどなぜtextなのか
　・これだけクラス設定とかあればidを設ける必要もなさそう
　・どうやって配列定義をしているのか不明だけれど、都道府県の選択肢は2個限定？
　　（それぞれ、違う変数になっているみたいですけれど）

まぁ、それは別として、
＞または2つとも選択せずに検索を押すと、「undefined」と出てしまいます。
2つに値が設定されていることをチェックすればよろしいかと。
チェック方法はいろいろ考えられますが、各optionの最初のものは選定対象外（【選択の標記】）になっているとするならば、それ以外が選択されていればOKということで

　if( $("#pref").attr("selectedIndex") && $("#sikuchoson").attr("selectedIndex"))
みたいな条件判定でいけるのではないでしょうか？

きちんとやるなら値を確認してってことになるのかも知れませんが、value値には何も入って無い様なので…