javascript - 3つの動的ドロップダウンに入力する

原文 javascript html onchange

3つの動的ドロップダウンがあり、これらはすべて前のドロップダウンから入力されています。私の問題は、3番目のドロップダウンをプログラムすると、2番目のドロップダウンを妨害するため、最初のドロップダウンのみが機能することです。おそらく非常に単純ですが、私のプログラミングスキルは非常に限られています。

これが私のコードです:



<script type="text/javascript">
function populate(s1,s2){
	var s1 = document.getElementById(s1);
	var s2 = document.getElementById(s2);
	s2.innerHTML = "";
	if(s1.value == "Product1"){
		var optionArray = ["|","50|50","80|80","100|100","120|120","150|150","200|200","250|250","300|300"];
	} else if(s1.value == "Product2"){
		var optionArray = ["|","50|50","80|80","100|100","120|120","150|150","200|200"];
	} else if(s1.value == "Product3"){
		var optionArray = ["|","50|50","80|80","100|100","120|120","150|150","200|200","250|250","300|300"];
	} else if(s1.value == "Product4"){
		var optionArray = ["|","50|50","80|80","100|100","120|120","150|150","200|200"];
	}
	for(var option in optionArray){
		var pair = optionArray[option].split("|");
		var newOption = document.createElement("option");
		newOption.value = pair[0];
		newOption.innerHTML = pair[1];
		s2.options.add(newOption);
	}
}
function populate(s1,s2,s3){
	var s1 = document.getElementById(s1);
	var s2 = document.getElementById(s2);
	var s3 = document.getElementById(s3);
	s3.innerHTML = "";
	if(s1.value == ("Product1") &s2.value == ("50")) {
		var optionArray = ["|","100|100","120|120","150|150","200|200","250|250","300|300","350|350","400|400","450|450"];
	} else if(s1.value == ("Product1") &s2.value ==("80")) {
		var optionArray = ["|","100|100","120|120","150|150","200|200","250|250","300|300","350|350","400|400","450|450"];
	} else if(s1.value == ("Product1") &s2.value ==("100")) {
		var optionArray = ["|","100|100","120|120","150|150","200|200","250|250","300|300","350|350","400|400","450|450"];
	} else if(s1.value == ("Product1") &s2.value ==("120")) {
		var optionArray = ["|","120|120","150|150","200|200","250|250","300|300","350|350","400|400","450|450"];
	} else if(s1.value == ("Product1") &s2.value ==("150")) {
		var optionArray = ["|","150|150","200|200","250|250","300|300","350|350","400|400","450|450"];
	} else if(s1.value == ("Product1") &s2.value ==("200")) {
		var optionArray = ["|","200|200","250|250","300|300","350|350","400|400","450|450"];
	} else if(s1.value == ("Product1") &s2.value ==("250")) {
		var optionArray = ["|","250|250","300|300","350|350","400|400","450|450"];
	} else if(s1.value == ("Product1") &s2.value ==("300")) {
		var optionArray = ["|","300|300","350|350","400|400","450|450"];
	} else if(s1.value == ("Product2") &s2.value ==("50")) {
		var optionArray = ["|","100|100","120|120","150|150","200|200","250|250","300|300","350|350","400|400","450|450"];
	} else if(s1.value == ("Product2") &s2.value ==("80")) {
		var optionArray = ["|","100|100","120|120","150|150","200|200","250|250","300|300","350|350","400|400","450|450"];
	} else if(s1.value == ("Product2") &s2.value ==("100")) {
		var optionArray = ["|","150|150","200|200","250|250","300|300","350|350","400|400","450|450"];
	} else if(s1.value == ("Product2") &s2.value ==("120")) {
		var optionArray = ["|","200|200","250|250","300|300","350|350","400|400","450|450"];
	} else if(s1.value == ("Product2") &s2.value ==("150")) {
		var optionArray = ["|","250|250","300|300","350|350","400|400","450|450"];
	} else if(s1.value == ("Product2") &s2.value ==("200")) {
		var optionArray = ["|","350|350","400|400","450|450"];
	} else if(s1.value == ("Product3") &s2.value ==("50")) {
		var optionArray = ["|","150|150","200|200","250|250","300|300","350|350","400|400","450|450"];
	} else if(s1.value == ("Product3") &s2.value ==("80")) {
		var optionArray = ["|","150|150","200|200","250|250","300|300","350|350","400|400","450|450"];
	} else if(s1.value == ("Product3") &s2.value ==("100")) {
		var optionArray = ["|","150|150","200|200","250|250","300|300","350|350","400|400","450|450"];
	} else if(s1.value == ("Product3") &s2.value ==("120")) {
		var optionArray = ["|","150|150","200|200","250|250","300|300","350|350","400|400","450|450"];
	} else if(s1.value == ("Product3") &s2.value ==("150")) {
		var optionArray = ["|","150|150","200|200","250|250","300|300","350|350","400|400","450|450"];
	} else if(s1.value == ("Product3") &s2.value ==("200")) {
		var optionArray = ["|","150|150","200|200","250|250","300|300","350|350","400|400","450|450"];
	} else if(s1.value == ("Product3") &s2.value ==("200")) {
		var optionArray = ["|","200|200","250|250","300|300","350|350","400|400","450|450"];
	} else if(s1.value == ("Product3") &s2.value ==("250")) {
		var optionArray = ["|","250|250","300|300","350|350","400|400","450|450"];
	} else if(s1.value == ("Product3") &s2.value ==("250")) {
		var optionArray = ["|","250|250","300|300","350|350","400|400","450|450"];
	} else if(s1.value == ("Product3") &s2.value ==("300")) {
		var optionArray = ["|","300|300","350|350","400|400","450|450"];
	} else if(s1.value == ("Product4") &s2.value ==("50")) {
		var optionArray = ["|","150|150","200|200","250|250","300|300","350|350","400|400","450|450"];
	} else if(s1.value == ("Product4") &s2.value ==("580")) {

		var optionArray = ["|","200|200","250|250","300|300","350|350","400|400","450|450"];
	} else if(s1.value == ("Product4") &s2.value ==("100")) {
		var optionArray = ["|","250|250","300|300","350|350","400|400","450|450"];
	} else if(s1.value == ("Product4") &s2.value ==("120")) {
		var optionArray = ["|","300|300","350|350","400|400","450|450"];
	} else if(s1.value == ("Product4") &s2.value ==("150")) {
		var optionArray = ["|","350|350","400|400","450|450"];
	} else if(s1.value == ("Product4") &s2.value ==("200")) {
		var optionArray = ["|","450|450"];
	}
	for(var option in optionArray){
	var pair = optionArray[option].split("|");
	var newOption = document.createElement("option");
	newOption.value = pair[0];
	newOption.innerHTML = pair[1];
	s3.options.add(newOption);
	}
}
</script>

<body>
<h2>Choose Your Product</h2>
<hr />
Choose Product:
<select id="slct1" name="slct1" onchange="populate(this.id,'slct2')">
  <option value=""></option>
  <option value="Product1">Product1</option>
  <option value="Product2">Product2</option>
  <option value="Product3">Product3</option>
  <option value="Product4">Product4</option>
</select>
<hr />
Choose Depth:
<select id="slct2" name="slct2" onchange="populate('slct2' 'slct1','slct3')"></select>
<hr />
Choose Height:
<select id="slct3" name="slct3"></select>
<hr />
</body>
答え
次の2つの主要な構文エラーがあります。

1-同じ名前の2つの関数があります!投入。

2- 2番目のリストの関数のパラメーターの呼び出しが間違っていますpopulate('slct2' 'slct1','slct3')" slct2とslct1の間に,があるはずです。

このデモをチェックアウト:http://jsbin.com/xameye/1/
関連記事

javascript - angularjs、tooltipster-mouseenterの問題

javascript - $ scopeの値をAngular JSで定義されている関数の外で取得する方法

javascript - JavaScriptとJqueryを使用した単純な製品フィルター

javascript - クリック時にCSSメニューを非表示にする

javascript - リダイレクトなしのOffice 365 OAuth

javascript - テキストボックスとドロップダウン値を追加する(数学)

javascript - JQGrid-「v4.3.2の新機能」イベントをバインドしようとして成功せず

javascript - イベントハンドラーをSVGグループに動的にアタッチするにはどうすればよいですか?

javascript - AngularJsのディレクティブを使用して、読み取りの多い/少ないトグルを作成します。

javascript - gulpで異なるフォルダーのアセットを処理する方法