テキストボックスに文字列を入れたら自動でプルダウンを選択するには？

質問

AJAXを利用して以下のようなことをしています。
１．郵便番号を入れたら自動で住所が表示される。
２．住所は県名と市町村名以下と分離している。
３．県名はプルダウン式で、市町村名はテキストボックスとする。

現在までのテストだと、両方ともテキストボックスの場合までは動作確認できたのですが、プルダウンにした場合のやり方わかりません。

<SELECT name="pref" id="pref">
<OPTION value="北海道">北海道</OPTION>
<OPTION value="青森県">青森県</OPTION>
・
・
</SELECT>
テキストボックスの場合は、
var add = xmlDoc.getElementsByTagName('ajaxadd').item(0).firstChild;
document.getElementById('add2').value = ajaxadd.data;
で取得できています。

ちょっとわかりにくい説明で申し訳ありませんが、よろしくお願いします。

回答No.1

bgbg · ベストアンサー

リストのオプション値とajaxで取得した都道府県名を比較していけば良いだけの話です。

var list = document.form.pref; // 都道府県名プルダウンリストのコンテキスト取得
// リストの各オプションの値とajaxで取得した県名prefTextとを比較し、一致したらそのインデックスを選択状態にする
for(index = 0; index < list.length; index++){
var element = list.options[index];
if(element.value == prefText){
list.selectedIndex = index;
break;
}
}

お礼

OPTIONの配列を取得するやり方が分かっていませんでした。
list.lengthでfor文を回して内容を比較すればよかったんですね。
非常に参考になりました。ありがとうございました。

回答No.2

yambejp

ajax処理はともかく、リストの値を選択するならこんなかんじ

<script language=javascript>
function changeFunc(str){
var pref=document.getElementById('pref');
for(var i=0;i<pref.options.length;i++){
if(pref.options[i].value==str){
pref.selectedIndex=i;
break;
}
}
}
</script>

<SELECT name="pref" id="pref">
<OPTION value="">都道府県</OPTION>
<OPTION value="北海道">北海道</OPTION>
<OPTION value="青森県">青森県</OPTION>
<OPTION value="東京都">東京都</OPTION>
<OPTION value="沖縄県">沖縄県</OPTION>
</SELECT>
<input type="button" value="東京都を選択" onClick="changeFunc('東京都')">

お礼

こちらもソースコードまでつけていただいてありがとうございました。
無事解決することができました。