CGI-BBS > JAVA/JavaScript > JavaScript > JavaScriptでvalue値を設定してＣＧＩに渡したい。


カレッヂ
カレッヂ


質問者 Takashi  投稿日 2/5(水) 00:17:02 
JavaScriptを使ったフォームでドロップダウンリストボックスの変更時の連続動作を
作ったのですが、optionで選択されたvalue値にtextとは違う独自のvalue値を
設定する方法がわかりません。（value値を設定して検索の為のCGIにその値を渡したいのです）
下記がそのスクリプトです。わかる方がいらっしゃいましたらぜひ教えて下さい。

<script language="javascript">
<!--//
var strCountry = new Array("--指定なし--","オーストラリア","カナダ","ニュージーランド");
var valueCountry = new Array("all","Australia","Canada","NewZealand");

var strCityAustralia = new Array("--指定なし--","シドニー","メルボルン");
var valueCityAustralia = new Array("all","Sydney","メルボルン");

var strCityCanada = new Array("--指定なし--","バンクーバー","トロント");
var strCityNewZealand = new Array("--指定なし--","オークランド");

function CreateList()
{
	Create(document.yellow.country, strCountry);
	CreateList2();
}
function CreateList2()
{
	var nSelectIndex = 0;
	ClearCity()
	nSelectIndex = document.yellow.country.value;

	if (nSelectIndex == "Australia")
	{

		Create(document.yellow.city, strCityAustralia, valueCityAustralia);	
	}
	if (strCountry[nSelectIndex] == "カナダ")
	{
		Create(document.yellow.city, strCityCanada);	
	}
	if (strCountry[nSelectIndex] == "ニュージーランド")
	{
		Create(document.yellow.city, strCityNewZealand);	
	}
}

function Create(objList, objArray, valueArray)
{
	var nMax = objArray.length;
	var nLoop = 0;
	for (nLoop = 0; nLoop < nMax; nLoop++)
	{
		var oAdd = document.createElement("OPTION"); 
		oAdd.text = objArray[nLoop];

		oAdd.value = valueArray[nLoop];
	//	oAdd.value = nLoop;

		objList.add(oAdd);
	}
}

function ClearCity()
{
	//オーストラリア
	for (nDel = 0; nDel < strCityAustralia.length; nDel++)
	{
		document.yellow.city.remove(0);
	}
	for (nDel = 0; nDel < strCityCanada.length; nDel++)
	{
		document.yellow.city.remove(0);
	}	
	for (nDel = 0; nDel < strCityNewZealand.length; nDel++)
	{
		document.yellow.city.remove(0);
	}	
}

//-->
</script>
</head>

<body onLoad="CreateList()">
<form name="yellow" action="./yellow.cgi" method="post">
<input type="hidden" name="category" value="all">
<input type="hidden" name="area" value="all">
<table border=2 width="400" bgcolor="#ffcc66" bordercolor="#006600" cellpadding="3">

<tr>
<td bgcolor="#ffff99">国名</td>
<td bgcolor="#ffffcc">
<SELECT size="1" name="country" onChange="CreateList2()"></SELECT>
</td>
</tr>
<tr>
<td bgcolor="#ffff99">都市名</td>
<td bgcolor="#ffffcc">
<SELECT size="1" name="city"></SELECT>
</td>
</tr>
<tr>
<td colspan=2 bgcolor="#ffffcc"><INPUT TYPE="submit" VALUE="検索">&nbsp;&nbsp;&nbsp;<INPUT TYPE="reset" VALUE="リセット"></td>
</tr>
</table>
</FORM>

プロバイダ参照：
サーバのＯＳ：(未選択)
パソコンのＯＳ：(未選択)
エディタ：
ＦＴＰソフト：
サーバ移転：していない
改造：(未選択)
ＣＧＩ習熟度：(未選択)

質問者 Takashi  [削除]  投稿日 2/5(水) 00:28:56 
先ほどのスクリプトは少し変えてしまったものでしたので、
元のスクリプトを再度投稿致します。
カタカナの国名や都市名のtextに対して、アルファベットで
valueを設定したいと思っています。

<script language="javascript">
<!--//
var strCountry = new Array("--指定なし--","オーストラリア","カナダ","ニュージーランド");
//var valueCountry = new Array("all","Australia","Canada","NewZealand");このようなvalue値を設定したい

var strCityAustralia = new Array("--指定なし--","シドニー","メルボルン");
//var valueCityAustralia = new Array("all","Sydney","melborune");このようなvalue値を設定したい

var strCityCanada = new Array("--指定なし--","バンクーバー","トロント");
var strCityNewZealand = new Array("--指定なし--","オークランド");

function CreateList()
{
	Create(document.yellow.country, strCountry);
	CreateList2();
}
function CreateList2()
{
	var nSelectIndex = 0;
	ClearCity()
	nSelectIndex = document.yellow.country.value;

	if (strCountry[nSelectIndex] == "オーストラリア")
	{

		Create(document.yellow.city, strCityAustralia);	
	}
	if (strCountry[nSelectIndex] == "カナダ")
	{
		Create(document.yellow.city, strCityCanada);	
	}
	if (strCountry[nSelectIndex] == "ニュージーランド")
	{
		Create(document.yellow.city, strCityNewZealand);	
	}
}

function Create(objList, objArray, valueArray)
{
	var nMax = objArray.length;
	var nLoop = 0;
	for (nLoop = 0; nLoop < nMax; nLoop++)
	{
		var oAdd = document.createElement("OPTION"); 
		oAdd.text = objArray[nLoop];
		oAdd.value = nLoop;
		objList.add(oAdd);
	}
}

function ClearCity()
{
	for (nDel = 0; nDel < strCityAustralia.length; nDel++)
	{
		document.yellow.city.remove(0);
	}
	for (nDel = 0; nDel < strCityCanada.length; nDel++)
	{
		document.yellow.city.remove(0);
	}	
	for (nDel = 0; nDel < strCityNewZealand.length; nDel++)
	{
		document.yellow.city.remove(0);
	}	
}

//-->
</script>
</head>

<body onLoad="CreateList()">
<form name="yellow" action="./yellow.cgi" method="post">
<table border=2 width="400" bgcolor="#ffcc66" bordercolor="#006600" cellpadding="3">

<tr>
<td bgcolor="#ffff99">国名</td>
<td bgcolor="#ffffcc">
<SELECT size="1" name="country" onChange="CreateList2()"></SELECT>
</td>
</tr>
<tr>
<td bgcolor="#ffff99">都市名</td>
<td bgcolor="#ffffcc">
<SELECT size="1" name="city"></SELECT>
</td>
</tr>
<tr>
<td colspan=2 bgcolor="#ffffcc"><INPUT TYPE="submit" VALUE="検索開始">&nbsp;&nbsp;&nbsp;<INPUT TYPE="reset" VALUE="リセット"></td>
</tr>
</table>
</FORM>
回答者 燐  [削除]  投稿日 3/19(水) 20:05:09 
こんな感じかな？
私も使い回しなので詳しくは説明できない。コードを解析して使ってください。
でも、こんな事がしたいと言うことなのかな？
ネスケは動作確認していません。
<HTML><HEAD><script LANGUAGE="VBScript">
Sub Cm1_Change()
call relateItems
End Sub 
Sub Cm2_Change()
call DataUpdate
End Sub
Sub Window_onLoad() 
call addHeadings
End Sub
</script><SCRIPT LANGUAGE="JavaScript"><!--
// 全一覧項目を表示させないようにするには『ACRE』を『true』にしてください。
var ACRE=false,M1st= ' 始めに選択してください。',M2nd=' 左の次に選択してください。',brw_v=navigator.appVersion.charAt(0),brw_n=navigator.appName.charAt(0);
var isNS=false;if((brw_v==4)&&(brw_n=="N")) isNS=true;
var isIE=false;if((brw_v==4)&&(brw_n=="M")) isIE=true;
var cats=new Array(),cIdx=-1,iIdx=-1,AllCatIndex=-1;
function makeItem(Im1,Im2,Im3){this.Im1=Im1;this.Im2=Im2;this.Im3=Im3;}
function newItem(Im1,Im2,Im3){if (ACRE==false){AllCatIndex++;cats[0][AllCatIndex]=new makeItem(Im1,Im2,Im3);cats[0].length++;}iIdx++;cats[cIdx][iIdx]=new makeItem(Im1,Im2,Im3);cats[cIdx].length++;}
function makeCat(name){this.name=name;this.length=0;}
function AllCats(name){if (ACRE) return;if (cIdx>-1) return;cIdx++;AllCatIndex=-1;cats[cIdx]=new makeCat(name);}
function newCat(name){cIdx++;iIdx=-1;cats[cIdx]=new makeCat(name);}
function relateItems(cat){if (isNS){if (cat>0){cIdx=cat-1;with (document.IDta.Cm2){for (var i=options.length; i>1; i--) options[i]=null;for (var i=0; i<cats[cIdx].length; i++) options[i+1]=new Option(cats[cIdx][i].Im1);options[0].selected=true;}}else{for (var i=document.IDta.Cm2.options.length; i>1; i--) document.IDta.Cm2.options[i]=null;document.IDta.Cm2.options[1]=new Option(M2nd);document.IDta.Cm2.options[1].selected=true;}}else{document.IDta.Cm2.clear();if (document.IDta.Cm1.listIndex>0){document.IDta.Cm2.addItem('');cIdx=document.IDta.Cm1.listIndex-1;
for (var i=0; i<cats[cIdx].length; i++)document.IDta.Cm2.addItem(cats[cIdx][i].Im1);document.IDta.Cm2.listIndex=0;}else{document.IDta.Cm2.addItem(M2nd);document.IDta.Cm2.listIndex=0;}}iIdx=0;}

function DataUpdate(item){var LData=null;if (isNS && item>0){document.yellow.country.value=cats[cIdx][item-1].Im3;document.yellow.city.value=cats[cIdx][item-1].Im2;}if (isIE && document.IDta.Cm2.listIndex>0){document.yellow.country.value=cats[cIdx][document.IDta.Cm2.listIndex-1].Im3;document.yellow.city.value=cats[cIdx][document.IDta.Cm2.listIndex-1].Im2;}}
function addHeadings(){document.IDta.Cm1.addItem(M1st);for (var i=0; i<cats.length; i++) document.IDta.Cm1.addItem(cats[i].name);document.IDta.Cm1.listIndex=0;}
// --></SCRIPT></HEAD><BODY><FORM NAME="IDta"><script LANGUAGE="JavaScript"><!--
if (isNS){document.write('国名<SELECT NAME="Cm1" onChange="relateItems(this.selectedIndex)"><OPTION>'+M1st+'</OPTION>');for (var i=0; i<cats.length; i++) document.write('<OPTION>'+cats[i].name+'</OPTION>');document.write('</SELECT>都市名<SELECT NAME="Cm2" onChange="DataUpdate(this.selectedIndex)"><OPTION>'+M2nd+'</OPTION>');
for (var i=0; i<10; i++) document.write('<OPTION></OPTION>');document.write('</SELECT>');for (var i=document.IDta.Cm2.options.length; i>0; i--) document.IDta.Cm2.options[i]=null;}else if (isIE){document.write('国名<OBJECT ID="Cm1" WIDTH="240" HEIGHT="24" CLASSID="CLSID:8BD21D30-EC42-11CE-9E0D-00AA006002F3"></OBJECT>都市名<OBJECT ID="Cm2" WIDTH="320" HEIGHT="24" CLASSID="CLSID:8BD21D30-EC42-11CE-9E0D-00AA006002F3"></OBJECT>');}// --></script><INPUT TYPE=BUTTON VALUE="検索開始" onClick="javascript:YellowSubmit()"><INPUT TYPE=RESET VALUE="値の初期化" onClick="document.yellow.reset()"></FORM><FORM NAME="yellow" action="./yellow.cgi" method="post"><INPUT NAME="country" TYPE="hidden"><INPUT NAME="city" TYPE="hidden"></FORM></BODY><SCRIPT LANGUAGE="JavaScript"><!--function YellowSubmit(){var str1=document.yellow.country.value;var str2=document.yellow.city.value;if ((str1+str2)=="" ){alert("検索条件が指定されていません");return;}else{document.yellow.submit();return;}}
AllCats('--指定なし--');
newCat('オーストラリア');
newItem('シドニー','Sydney', 'Australia');
newItem('メルボルン','Melbourne', 'Australia');
newCat('カナダ');
newItem('カルガリー','Calgary', 'Canada');
newItem('バンクーバー','Vancouver', 'Canada');
newCat('ニュージーランド');
newItem('ウェリントン','Wellington', 'New Zealand');
newItem('カンタベリー','Canterbury', 'New Zealand');
//--></SCRIPT></HTML>
質問者 Takashi  [削除]  投稿日 3/21(金) 17:59:28 
ご返事ありがとうございました。
やってみたのですが、完全にうまくはいきませんでした。
わからないことがあるのですが、各name (country, city)に対する
value値はどこで設定しているのでしょうか？
特にcountryに対するvalue値の設定がないようで、ここが今ひとつ良くわかりません。
宜しければ教えて下さい。
回答者 燐  [削除]  投稿日 4/4(金) 21:12:04 
newCat('オーストラリア');
newItem('シドニー','Sydney', 'Australia');
newItem('メルボルン','Melbourne', 'Australia');

newCat関数が　国名を設定するvalue値です。
newItem関数が、町名を設定する所です。
これらの関数は、cats に配列で代入されます。
一時配列が該当する国名の時、二時配列を参照するページになっています。


もう１度貼り付けます。


<HTML><HEAD>
<TITLE>さんぷる</TITLE>
<!-- 設定�� 情報設定 -->
<SCRIPT LANGUAGE="JavaScript">
<!--
// 全一覧項目を表示させないようにするには『AllCatRoutineExit』を『true』にしてください。
var AllCatRoutineExit = false;

var FirstMessage  = ' 始めに選択してください。';
var SecondMessage = ' 左の次に選択してください。';
// -->
</SCRIPT>

<!-- CategoryMenu1,2 変更時の動作 -->
<script LANGUAGE="VBScript">
  Sub CategoryMenu1_Change()
    call relateItems
  End Sub 
  Sub CategoryMenu2_Change()
    call gotoPage
  End Sub
  Sub Window_onLoad() 
    call addHeadings
  End Sub
</script>

<!-- Category Menu 作成 Script -->
<SCRIPT LANGUAGE="JavaScript">
<!--
var brw_v=navigator.appVersion.charAt(0);
var brw_n=navigator.appName.charAt(0);
var isNS = false;
var isIE = false;
if((brw_v == 4)&&(brw_n == "M")) isIE = true;
if((brw_v == 4)&&(brw_n == "N")) isNS = true;
回答者 燐  [削除]  投稿日 4/4(金) 21:12:39 
続き−−−−−−−−−−−−−−−−−−−−




var cats = new Array();
var catsIndex = -1;
var itemsIndex = -1;
var AllCatIndex = -1;


function makeItem(Item01, Item02 , Item03 , Item04 , Item05) {
  this.Item01 = Item01;
  this.Item02 = Item02;
  this.Item03 = Item03;
  this.Item04 = Item04;
  this.Item05 = Item05;}

function newItem(Item01, Item02 , Item03 , Item04 , Item05) {
  if (AllCatRoutineExit == false){
    AllCatIndex++;
    cats[0][AllCatIndex] = new makeItem(Item01, Item02 , Item03 , Item04 , Item05);
    cats[0].length++;}
  itemsIndex++;
  cats[catsIndex][itemsIndex] = new makeItem(Item01, Item02 , Item03 , Item04 , Item05);
  cats[catsIndex].length++;}

function makeCat(name) {
  this.name = name;
  this.length = 0;}

function AllCats(name) {
  if (AllCatRoutineExit) return;
  if (catsIndex > -1) return;
  catsIndex++;
  AllCatIndex = -1;
  cats[catsIndex] = new makeCat(name);}

function newCat(name) {
  catsIndex++;
  itemsIndex = -1;
  cats[catsIndex] = new makeCat(name);}

function relateItems(cat) {
  if (isNS) {
    if (cat > 0) {catsIndex = cat - 1;
      with (document.INPUTDATA.CategoryMenu2) {
        for (var i = options.length; i > 1; i--) options[i] = null;
        for (var i = 0; i < cats[catsIndex].length; i++) options[i + 1] = new Option(cats[catsIndex][i].Item01);
        options[0].selected = true;
      }
    }
    else{
      for (var i = document.INPUTDATA.CategoryMenu2.options.length; i > 1; i--) document.INPUTDATA.CategoryMenu2.options[i] = null;
      document.INPUTDATA.CategoryMenu2.options[1] = new Option(SecondMessage);
      document.INPUTDATA.CategoryMenu2.options[1].selected = true;
    }
  }
  else {
    document.INPUTDATA.CategoryMenu2.clear();
    if (document.INPUTDATA.CategoryMenu1.listIndex > 0) {
      document.INPUTDATA.CategoryMenu2.addItem('');
      catsIndex = document.INPUTDATA.CategoryMenu1.listIndex - 1;
      for (var i = 0; i < cats[catsIndex].length; i++)
        document.INPUTDATA.CategoryMenu2.addItem(cats[catsIndex][i].Item01);
      document.INPUTDATA.CategoryMenu2.listIndex = 0;
    }
    else{
      document.INPUTDATA.CategoryMenu2.addItem(SecondMessage);
      document.INPUTDATA.CategoryMenu2.listIndex = 0;
    }
  }
  itemsIndex = 0;
}
回答者 燐  [削除]  投稿日 4/4(金) 21:13:18 
続き−−−−−−−−−−−−−−−−−−−−−−





function gotoPage(item) {
  if (isNS && item > 0){
    document.INPUTDATA.TextOut.value=cats[catsIndex][item - 1].Item03;
    document.INPUTDATA.TextOut2.value=cats[catsIndex][item - 1].Item02;
  }
  if (isIE && document.INPUTDATA.CategoryMenu2.listIndex > 0) {
    document.INPUTDATA.TextOut.value=cats[catsIndex][document.INPUTDATA.CategoryMenu2.listIndex - 1].Item03;
    document.INPUTDATA.TextOut2.value=cats[catsIndex][document.INPUTDATA.CategoryMenu2.listIndex - 1].Item02;
  }
}

function addHeadings() {
  document.INPUTDATA.CategoryMenu1.addItem(FirstMessage);
  for (var i = 0; i < cats.length; i++) document.INPUTDATA.CategoryMenu1.addItem(cats[i].name);
  document.INPUTDATA.CategoryMenu1.listIndex = 0;
}
// -->
</SCRIPT>

<!-- FORM の内容をサーバーへ転送 -->

</HEAD>
<BODY>
<FORM NAME="INPUTDATA">
<TABLE>

<TR><TD colspan=2>国名を指定してください。
</TD><TD colspan=2>町名を決めて下さい。
</TD></TR>
<TR><TD colspan=2>
<script LANGUAGE="JavaScript">
<!--
if (isNS) {
  document.write('<SELECT NAME = "CategoryMenu1" onChange = "relateItems(this.selectedIndex)">');
  document.write('<OPTION>' + FirstMessage + '</OPTION>');
  for (var i = 0; i < cats.length; i++) document.write('<OPTION>' + cats[i].name + '</OPTION>');
  document.write('</SELECT></TD><TD colspan=2>');
  document.write('<SELECT NAME = "CategoryMenu2" onChange = "gotoPage(this.selectedIndex)">');
  document.write('<OPTION>' + SecondMessage + '</OPTION>');
  for (var i = 0; i < 10; i++) document.write('<OPTION></OPTION>');
  document.write('</SELECT>');
  for (var i = document.INPUTDATA.CategoryMenu2.options.length; i > 0; i--) document.INPUTDATA.CategoryMenu2.options[i] = null;
}
else if (isIE) {
  document.write('<OBJECT ID = "CategoryMenu1" WIDTH = "240" HEIGHT = "24" CLASSID = "CLSID:8BD21D30-EC42-11CE-9E0D-00AA006002F3">');
  document.write('<PARAM NAME = "VariousPropertyBits" VALUE = "746604571">');
  document.write('<PARAM NAME = "Size" VALUE = "5574;635">');
  document.write('<PARAM NAME = "MatchEntry" VALUE = "1">');
  document.write('<PARAM NAME = "FontCharSet" VALUE = "0">');
  document.write('<PARAM NAME = "FontPitchAndFamily" VALUE = "2">');
  document.write('<PARAM NAME = "DisplayStyle" VALUE = "3">');
  document.write('<PARAM NAME = "ShowDropButtonWhen" VALUE = "2">');
  document.write('</OBJECT></TD><TD colspan=2>');
  document.write('<OBJECT ID = "CategoryMenu2" WIDTH = "320" HEIGHT = "24" CLASSID = "CLSID:8BD21D30-EC42-11CE-9E0D-00AA006002F3">');
  document.write('<PARAM NAME = "VariousPropertyBits" VALUE = "746604571">');
  document.write('<PARAM NAME = "Size" VALUE = "5574;635">');
  document.write('<PARAM NAME = "MatchEntry" VALUE = "1">');
  document.write('<PARAM NAME = "FontCharSet" VALUE = "0">');
  document.write('<PARAM NAME = "FontPitchAndFamily" VALUE = "2">');
  document.write('<PARAM NAME = "DisplayStyle" VALUE = "3">');
  document.write('<PARAM NAME = "ShowDropButtonWhen" VALUE = "2">');
  document.write('</OBJECT>');
}
// -->
</script>
回答者 燐  [削除]  投稿日 4/4(金) 21:14:06 
続き−−−−−−−−−−−−−−−−−−−−−






</TD></TR>

<TR><TD>国名</TD><TD colspan=2>
<INPUT NAME="TextOut" TYPE="TEXT" SIZE=32>
</TD></TR>
<TR><TD>町名</TD><TD colspan=2>
<INPUT NAME="TextOut2" TYPE="TEXT" SIZE=32>
</TD></TR>
<TR>
<TD colspan=4><INPUT TYPE=RESET VALUE="値の初期化"></TD>
</TR>
</TABLE>
</FORM>
</BODY>

<!-- 設定 -->
<SCRIPT LANGUAGE="JavaScript">
<!--
//ここからテーブル設定。
AllCats('--指定なし--');
newCat('オーストラリア');
newItem('シドニー','Sydney', 'Australia','','');
newItem('メルボルン','Melbourne', 'Australia','','');
newCat('カナダ');
newItem('カルガリー','Calgary', 'Canada','','');
newItem('バンクーバー','Vancouver', 'Canada','','');
newCat('ニュージーランド');
newItem('ウェリントン','Wellington', 'New Zealand','','');
newItem('カンタベリー','Canterbury', 'New Zealand','','');
//-->
</SCRIPT>
</HTML>




以上−−−−−−−−−−−−−−−−−−−−−−−−−−−−−


こんな感じ・・・・。
これで貼り付けて動くと思う・・・。
回答者 燐  [削除]  投稿日 4/4(金) 21:21:30 
＞　<!-- FORM の内容をサーバーへ転送 -->

あ、これはゴミです。
この記載の下に、Submitに関する関数がありました。
このサンプルに必要ないので関数とボタンは消去されています。

返信(回答)する

 

Ｗｅｂ裏技