みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

複数のプルダウン

いつも参考にしております。
プルダウンが選択後、もうひとつのプルダウンを表示したいと
思っておりますが、うまく表示されません。
1つめのプルダウンの選択によって、2つめのプルダウンのメニューは
異なります。
<!--
function setArea(n) {
 prefItem = [["▼選択してください"],
  ["▼選択してください", "千葉県", "東京都", "神奈川県", "山梨県"],
  ["▼選択してください", "新潟県", "長野県", "富山県"],
  ["▼選択してください", "静岡県", "愛知県", "岐阜県", "三重県"],
  len = document.form1.PrefID.options.length;
  for (i=0; i<len; i++) {
   document.form1.PrefID.options[i] = null;
  }
  document.form1.PrefID.style.visibility = "visible";
  for (i=0; i<prefItem[n].length; i++) {
   document.form1.PrefID.options[i] = new Option(prefItem[n][i]);
  }
}
//-->

<select name="AreaID" onChange="setArea(this.selectedIndex)">
<option value="0" selected>▼選択してください</option>
<option value="1">関東</option>
<option value="2">甲信越・北陸</option>
<option value="3">東海</option>
</select>
<select name="PrefID" style="visibility:hidden">

たとえば、1つめのプルダウンを「関東」を選択すると
2つめのプルダウンに「千葉県, 東京都, 神奈川県, 山梨県」
と表示されますが、その後「▼選択してください」を選択すると
「▼選択してください, 神奈川県」と2つのメニューが表示されてしまいます。
メニューを削除して、新しく生成しています。
なので、「▼選択してください」と1つだけのメニューになるはずだと思うのですが。
ご教授お願いいたします。

投稿日時 - 2006-10-12 13:48:46

QNo.2467539

すぐに回答ほしいです

質問者が選んだベストアンサー

やり方は色々あると思いますが、とりあえず。

<html>
<head>
<script type="text/javascript">
<!--
var area=0;
function setArea(n) {
area=n;
prefItem = [
["千葉県", "東京都", "神奈川県", "山梨県"],
["新潟県", "長野県", "富山県"],
["静岡県", "愛知県", "岐阜県", "三重県"]
];
len = document.form1.PrefID.options.length;
for (i=len-1; i>0; --i)document.form1.PrefID.options[i] = null;
if(n!=0){
document.form1.PrefID.style.visibility = "visible";
for (i=0; i<prefItem[n-1].length; i++)document.form1.PrefID.options[i+1] = new Option(prefItem[n-1][i]);
}
setPref(0);
}

function setPref(n) {
cityItem = [
[["chiba 1", "chiba 2"],["tokyo 1", "tokyo 2"],["kana 1", "kana 2"], ["yama 1", "yama 2"]],
[["nigata 1", "nigata 2"],["nagano 1", "nagano 2"],["toyama 1", "toyama 2"]],
[["shizu 1", "shizu 2"],["aichi 1", "aichi 2"],["gifu 1", "gifu 2"], ["nakao mie 1", "nakao mie 2"]]
];
len = document.form1.CityID.options.length;
for (i=len-1; i>0; --i) document.form1.CityID.options[i] = null;
if(n==0)return;
document.form1.CityID.style.visibility = "visible";
for (i=0; i<cityItem[area-1][n-1].length; i++) document.form1.CityID.options[i+1] = new Option(cityItem[area-1][n-1][i]);
}
//-->
</script>
</head>
<body>
<form name="form1">
<select name="AreaID" onChange="setArea(this.selectedIndex)">
<option value="0" selected>▼選択してください</option>
<option value="1">関東</option>
<option value="2">甲信越・北陸</option>
<option value="3">東海</option>
</select>
<select name="PrefID" onChange="setPref(this.selectedIndex)"><option value="0" selected>▼選択してください</option></select>
<select name="CityID" onChange=""><option value="0" selected>▼選択してください</option></select>
</form>
</body>
</html>

投稿日時 - 2006-10-12 17:56:35

補足

var area = 0;
function setArea(n) {
 area = n;
 prefItem = <?= $prefItem ?>;
 len = document.form1.PrefID.options.length;
 for (i=len-1; i>=0; --i) {
  document.form1.PrefID.options[i] = null;
 }
 if(n != 0) {
  document.form1.PrefID.style.visibility = "visible";
  for (i=0; i<prefItem[n].length; i++) {
   document.form1.PrefID.options[i] = new Option(prefItem[n][i], prefItem[n][i]);
  }
 }
 setPref(0);
}

function setPref(n) {
 cityItem = <?= $cityItem ?>;
 len = document.form1.CityID.options.length;
 for (i=len-1; i>=0; --i) {
  document.form1.CityID.options[i] = null;
 }
 if(n == 0) return;
 document.form1.CityID.style.visibility = "visible";
 for (i=0; i<cityItem[area][n].length; i++) {
  document.form1.CityID.options[i] = new Option(cityItem[area][n-1][i], cityItem[area][n-1][i]);
 }
}
教えていただいたものを参考に上記のようにしていみました。
2つめのプルダウンの1番したのメニューを選択した場合のみ
3つのめのプルダウンにメニューが表示されません。

投稿日時 - 2006-10-13 10:48:55

お礼

for (i=0; i<cityItem[area][n].length; i++) {
を以下に変更したら、思っていたように動作いたしました。
for (i=0; i<cityItem[area][n-1].length; i++) {

ソース等提示していただき、ありがとうございました。

投稿日時 - 2006-10-13 11:29:32

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.2

普通に表示されると思いますが、どこかに文法エラーなどがあるのでは?

<html>
<head>
<script type="text/javascript">
<!--
function setArea(n) {
prefItem = [["▼選択してください"],
["▼選択してください", "千葉県", "東京都", "神奈川県", "山梨県"],
["▼選択してください", "新潟県", "長野県", "富山県"],
["▼選択してください", "静岡県", "愛知県", "岐阜県", "三重県"]];
len = document.form1.PrefID.options.length;
for (i=len-1; i>=0; --i)document.form1.PrefID.options[i] = null;
document.form1.PrefID.style.visibility = "visible";
for (i=0; i<prefItem[n].length; i++)document.form1.PrefID.options[i] = new Option(prefItem[n][i]);
}

function setPref(n) {
cityItem = [["▼選択してください"],
["▼選択してください", "宇都宮市", "足利市"],
["▼選択してください", "千葉市", "千葉市中央区"],
["▼選択してください", "さいたま市", "さいたま市西区", "さいたま市北区"]];
len = document.form1.CityID.options.length;
for (i=len-1; i>=0; --i) document.form1.CityID.options[i] = null;
document.form1.CityID.style.visibility = "visible";
for (i=0; i<cityItem[n].length; i++) document.form1.CityID.options[i] = new Option(cityItem[n][i],cityItem[n][i]);
}
//-->
</script>
</head>
<body>
<form name="form1">
<select name="AreaID" onChange="setArea(this.selectedIndex)">
<option value="0" selected>▼選択してください</option>
<option value="1">関東</option>
<option value="2">甲信越・北陸</option>
<option value="3">東海</option>
</select>
<select name="PrefID" onChange="setPref(this.selectedIndex)"><option value="0" selected>▼選択してください</option></select>
<select name="CityID"><option value="0" selected>▼選択してください</option></select>
</form>
</body>
</html>

投稿日時 - 2006-10-12 15:17:17

補足

talepandaさん ありがとうございます。
文法エラーを見つけました。すみませんでした。
ですが、3つのプルダウンメニューが正しく表示されません。
配列は、3次元配列になるのでしょうか?

投稿日時 - 2006-10-12 15:40:09

ANo.1

for (i=0; i<len; i++) {
   document.form1.PrefID.options[i] = null;
  }



  for (i=len-1; i>=0; --i) {
   document.form1.PrefID.options[i] = null;
  }

投稿日時 - 2006-10-12 14:35:43

補足

少々話しがずれてしまうのですが・・・
プルダウンが3つになった場合も全く同じようにしているのですが
1つめのプルダウンを選択しても、2つめプルダウンのメニューが
表示されません。
<!--
function setPref(n) {
 cityItem = [["▼選択してください"],
  ["▼選択してください", "宇都宮市", "足利市"],
  ["▼選択してください", "千葉市", "千葉市中央区"],
  ["▼選択してください", "さいたま市", "さいたま市西区", "さいたま市北区"]];
 len = document.form1.CityID.options.length;
 for (i=len-1; i>=0; --i) {
  document.form1.CityID.options[i] = null;
 }
 document.form1.CityID.style.visibility = "visible";
 for (i=0; i<prefItem[n].length; i++) {
  document.form1.CityID.options[i] = new Option(cityItem[n][i],cityItem[n][i]);
 }
}
//-->

<select name="AreaID" onChange="setArea(this.selectedIndex)">
<option value="0" selected>▼選択してください</option>
<option value="1">関東</option>
<option value="2">甲信越・北陸</option>
<option value="3">東海</option>
</select>
<select name="PrefID" onChange="setPref(this.selectedIndex)">
<option value="0" selected>▼選択してください</option>
</select>
<select name="CityID">
<option value="0" selected>▼選択してください</option>
</select>

ご教授お願いいたします。

投稿日時 - 2006-10-12 15:00:02

お礼

talepandaさん ありがとうございます。
ご教授いただいたものでできました。
ありがとうございました。

投稿日時 - 2006-10-12 14:49:40

あなたにオススメの質問