フォームにコンボボックスが二つ並んでいまして、
一つのコンボボックスの中から、項目を選択すると
もう片方のコンボボックスの選択できる項目の数を追加したり、削除したりする事は可能でしょうか?
ちなみにフォームを再ロードせずに作りたいと考えております。
どなたか、教えて下さい。

このQ&Aに関連する最新のQ&A

A 回答 (1件)

私がここで説明するより、


以下のページが参考になるかと思います。

複数の SELECT タグを連動する(クライアントサイドスクリプト版) (unibon)
http://www.geocities.co.jp/SiliconValley/4334/un …

参考URL:http://www.geocities.co.jp/SiliconValley/4334/un …
    • good
    • 0
この回答へのお礼

お返事が送れて申し訳ありません。
参考で教えて頂いた、URLの内容の事をしたかったので
大変助かりました。
ありがとうございました。

お礼日時:2001/04/29 14:55

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

Qリスト(コンボ)ボックスの日本語による項目選択

Htmlのリストボックス(select)で、複数文字の日本語を入力してリストを選択する方法を教えて下さい。
IEデフォルトの動きでは、入力された最後の文字から始まる語が選択されます。
Javascriptのサンプルを提供して頂けるとありがたいです。
例:<option>あか</option><option>かき</option> というリストで「あか」と打って「あか」を選択したいのです。

Aベストアンサー

textboxに入力→リスト選択ですね?

<html>
<head>
<title>リストボックス自動選択</title>
<script type="text/javascript">
<!--
function set(){
var txt=document.hoge.hogetxt.value;
for(var i=0;i<document.hoge.hogebox.options.length;i++){
if(document.hoge.hogebox.options[i].text.indexOf(txt)!=-1&&txt.length>0){
document.hoge.hogebox.selectedIndex=i;
i=10000;
}
}
}
//-->
</script>
</head>
<body>
<form name="hoge">
<input type="text" value="" name="hogetxt" size=4 maxlength=4><input type="button" value="リストボックス自動選択" onclick="set()"><br>
<select name="hogebox">
<option>  </option>
<option>あか</option>
<option>あき</option>
<option>あく</option>
<option>あけ</option>
</select>
</form>
</body>
</html>

インデントが無くなっているので自分で修正したほうがいいかも知れません。

textboxに入力→リスト選択ですね?

<html>
<head>
<title>リストボックス自動選択</title>
<script type="text/javascript">
<!--
function set(){
var txt=document.hoge.hogetxt.value;
for(var i=0;i<document.hoge.hogebox.options.length;i++){
if(document.hoge.hogebox.options[i].text.indexOf(txt)!=-1&&txt.length>0){
document.hoge.hogebox.selectedIndex=i;
i=10000;
}
}
}
//-->
</script>
</head>
<body>
<form name="hoge">
<input type="text" value="" name="hogetxt" si...続きを読む

Qコンボボックス選択時に関連する情報をテキストボックスに表示させたい。

現在、以下のようなものをJavaScriptで実現しようとしているのですが、方法がわからないので質問させていただきます。

DBに商品テーブルがあって、カラムが「商品コード」「商品名称」「金額」だとします。
画面にはコンボボックスと右横にテキストボックスがあって、
コンボボックスには商品名称のみ表示、金額はテキストボックスに表示します。
(商品コードは<option>のvalueに設定します)
サーバにアクセスせずにコンボボックスの内容を選択するたびに、対応する金額が表示されるようにしたいです。

PHPでコンボボックスを作成するときにvalueに商品コードと金額を区切り記号("_"など)で連結した値を設定しておき、
それを商品コードと金額に分解すれば実現できると思うのですが、もう少しスマートな方法があればと思い、質問させて頂きました。

環境はWindowsXP、PHP5、MYSQLです。
よろしくお願いします。

Aベストアンサー

>PHPでコンボボックスを作成するときにvalueに商品コードと金額を区切り記号
>("_"など)で連結した値を設定しておき、

単純にvalueに商品コードをいれておき、金額用のリストを用意しておけばよいのでは?

<script>
var kingaku={x001:300,y002:200,z003:100};
function setKingaku(obj){
var f=obj.form;
if(obj.value==""){f.kingaku.value="";return false;}
f.kingaku.value=kingaku[obj.value];
}
</script>
<form>
<select onchange="setKingaku(this)">
<option value="">選択</option>
<option value="x001">りんご</option>
<option value="y002">みかん</option>
<option value="z003">ばなな</option>
</select>
<input type="text" name="kingaku" value="">
</form>

>PHPでコンボボックスを作成するときにvalueに商品コードと金額を区切り記号
>("_"など)で連結した値を設定しておき、

単純にvalueに商品コードをいれておき、金額用のリストを用意しておけばよいのでは?

<script>
var kingaku={x001:300,y002:200,z003:100};
function setKingaku(obj){
var f=obj.form;
if(obj.value==""){f.kingaku.value="";return false;}
f.kingaku.value=kingaku[obj.value];
}
</script>
<form>
<select onchange="setKingaku(this)">
<option value="">選択</opt...続きを読む

Qプルダウン Or コンボボックスを選択したら、テキストボックスを入力不可にさせる方法 

フォーム制御として、JavaScriptを使用して、プルダウンよりある項目が選択されたと同時に、あるテキストボックスの入力を不可、またはmaxlengthを0にしたいのですが、思うように出来ません。
maxlengthをvalue等に変更させたら値は変更されたので、
関数としての動きは問題なさそうです。

どなたか、ご教授お願いいたします。

※現在下記のソースは、list番号を指定していません。

<script language="JavaScript">
<!--
function MM_jumpMenu(){
parent.document.form1.text1.maxlength=0;

}
//-->
</script>

<form name="form1" method="post" action="">
<select name="menu1" onChange="MM_jumpMenu()">
<option selected>unnamed1</option>
<option>unnamed2</option>
</select>
<input type="text" name="text1" maxlength="10">
</form>

フォーム制御として、JavaScriptを使用して、プルダウンよりある項目が選択されたと同時に、あるテキストボックスの入力を不可、またはmaxlengthを0にしたいのですが、思うように出来ません。
maxlengthをvalue等に変更させたら値は変更されたので、
関数としての動きは問題なさそうです。

どなたか、ご教授お願いいたします。

※現在下記のソースは、list番号を指定していません。

<script language="JavaScript">
<!--
function MM_jumpMenu(){
parent.document.form1.text1.maxlength=0;

}
/...続きを読む

Aベストアンサー

> parent.document.form1.text1.maxlength=0;

form1 は、親にあるのは間違っていないのですね。

で、入力負荷にするのなら disabled プロパティをいじりましょう。

parent.document.form1.text1.disabled = true;

Qコンボ(?)ボックスの項目の削除方法

タイトルどおりの質問なんですが、
コンボ(?)ボックスのある項目を選択した状態で「削除」ボタンを押すことにより
その項目を削除する。というプログラムを作成しています。
ちなみにコードは以下のようになっています。
<INPUT TYPE="BUTTON" name="Catdel" VALUE="削除" onClick="deldata();">
<SELECT Name="Option" MULTIPLE SIZE=10 >
<OPTION value="01">1</OPTION>
<OPTION value="02">2</OPTION>
<OPTION value="03">3</OPTION>
<OPTION value="04">4</OPTION>
<OPTION value="05">5</OPTION>
<OPTION value="06">6</OPTION>
<OPTION value="07">7</OPTION>
<OPTION value="08">8</OPTION>
<OPTION value="09">9</OPTION>
<OPTION value="10">10</OPTION>
</SELECT>

function deldata(){
・・・
・・・
}
この function deldata()の中の処理方法について教えてください。
初歩的な質問と思いますが、よろしくお願いします。

タイトルどおりの質問なんですが、
コンボ(?)ボックスのある項目を選択した状態で「削除」ボタンを押すことにより
その項目を削除する。というプログラムを作成しています。
ちなみにコードは以下のようになっています。
<INPUT TYPE="BUTTON" name="Catdel" VALUE="削除" onClick="deldata();">
<SELECT Name="Option" MULTIPLE SIZE=10 >
<OPTION value="01">1</OPTION>
<OPTION value="02">2</OPTION>
<OPTION value="03">3</OPTION>
<OPTION value="04">4</OPT...続きを読む

Aベストアンサー

Hello!

It's Anser.

<script language="javascript">
<!--
function deldata(){
  var itemIndex = document.all("Option").selectedIndex;
  if (itemIndex >= 0) {
    document.all("Option").options[itemIndex] = null;
  }
}
//-->
</script>
<INPUT TYPE="BUTTON" name="Catdel" VALUE="削除" onClick="deldata();">
<SELECT Name="Option" MULTIPLE SIZE=10 >
<OPTION value="01">1</OPTION>
<OPTION value="02">2</OPTION>
<OPTION value="03">3</OPTION>
<OPTION value="04">4</OPTION>
<OPTION value="05">5</OPTION>
<OPTION value="06">6</OPTION>
<OPTION value="07">7</OPTION>
<OPTION value="08">8</OPTION>
<OPTION value="09">9</OPTION>
<OPTION value="10">10</OPTION>
</SELECT>

Hello!

It's Anser.

<script language="javascript">
<!--
function deldata(){
  var itemIndex = document.all("Option").selectedIndex;
  if (itemIndex >= 0) {
    document.all("Option").options[itemIndex] = null;
  }
}
//-->
</script>
<INPUT TYPE="BUTTON" name="Catdel" VALUE="削除" onClick="deldata();">
<SELECT Name="Option" MULTIPLE SIZE=10 >
<OPTION value="01">1</OPTION>
<OPTION value="02">2</OPTION>
<OPTION value="03">3</OPTION>
<OPTI...続きを読む

Qセレクトメニューの選択項目によって、もう1つのセレクトメニューの項目と項目数を変更する

もう1つのセレクトメニューの項目数が同じタイプのものは、ネット上で見つけられたのですが、項目の数も違うものは見つかりませんでした。
たとえば、1つ目のセレクトメニューでAタイプとCタイプを選択すると、2つ目のセレクトメニューでは5項目から選択でき、Bタイプを選択すると、3項目から選択できるという風にしたいです。ご助言お願いします。

Aベストアンサー

試しに作ってみました。 こういう感じでしょうか。

<html>
<head>
<title>test</title>
<script type="text/javascript">
<!--
menu2txt = new Array(); // 2つ目のメニューの項目表示テキスト用配列
menu2val = new Array(); // 2つ目のメニューのvalue値用配列
menu2txt["a"] = new Array();
menu2val["a"] = new Array();
menu2txt["b"] = new Array();
menu2val["b"] = new Array();
menu2txt["c"] = new Array();
menu2val["c"] = new Array(); // 二次配列作成

menu2txt["a"][0] = "項目A1";
menu2val["a"][0] = "A1";
menu2txt["a"][1] = "項目A2";
menu2val["a"][1] = "A2";
menu2txt["a"][2] = "項目A3";
menu2val["a"][2] = "A3";
menu2txt["a"][3] = "項目A4";
menu2val["a"][3] = "A4";
menu2txt["a"][4] = "項目A5";
menu2val["a"][4] = "A5";

menu2txt["b"][0] = "項目B1";
menu2val["b"][0] = "B1";
menu2txt["b"][1] = "項目B2";
menu2val["b"][1] = "B2";
menu2txt["b"][2] = "項目B3";
menu2val["b"][2] = "B3";

menu2txt["c"][0] = "項目C1";
menu2val["c"][0] = "C1";
menu2txt["c"][1] = "項目C2";
menu2val["c"][1] = "C2";
menu2txt["c"][2] = "項目C3";
menu2val["c"][2] = "C3";
menu2txt["c"][3] = "項目C4";
menu2val["c"][3] = "C4";
menu2txt["c"][4] = "項目C5";
menu2val["c"][4] = "C5";
// 以上、セレクトメニューの表示項目とvalue値を配列に格納

function set_menu(){
key = document.f1.menu1.value;
while (document.f1.menu2.options[0]){
document.f1.menu2.options[0] = null; // 2つ目のメニューを消去
}
for (i=0; i<menu2txt[key].length; i++){
document.f1.menu2.options[i] = new Option(menu2txt[key][i],menu2val[key][i]);
// 2つ目のメニューの項目を生成・表示テキストとvalue値を設定
}
}

window.onload = set_menu; // ページロード時にmenu1の初期値でmenu2を設定
// -->
</script>
</head>
<body>

<form action="#" name="f1">
<div>
<select name="menu1" onchange="set_menu()">
<option value="a">Aタイプ</option>
<option value="b">Bタイプ</option>
<option value="c">Cタイプ</option>
</select>
<select name="menu2">
</select>
</div>
</form>

</body>
</html>

参考になれば…

試しに作ってみました。 こういう感じでしょうか。

<html>
<head>
<title>test</title>
<script type="text/javascript">
<!--
menu2txt = new Array(); // 2つ目のメニューの項目表示テキスト用配列
menu2val = new Array(); // 2つ目のメニューのvalue値用配列
menu2txt["a"] = new Array();
menu2val["a"] = new Array();
menu2txt["b"] = new Array();
menu2val["b"] = new Array();
menu2txt["c"] = new Array();
menu2val["c"] = new Array(); // 二次配列作成

menu2txt["a"][0] = "項目A...続きを読む


人気Q&Aランキング

おすすめ情報