javascript - 循环遍历两个下拉选项以填充文本框

Question

所以我正在尝试创建一个表单，但我不是 100% 确定我需要做什么......实际上不......我完全陷入困境。所以我有一个数组。 (下面的示例)我有两个选项希望用户选择。下拉框一中，用户将能够选择五个类别之一，然后从该选择中，只有该类别中的选项可供用户在下拉框二中选择。从那里它将自动填充相应的文本框。

例如，如果用户选择“五个类别中的选项三”，那么在下拉菜单二中，用户将只有选项 11、选项 12、选项 13 和选项 14 可用。然后，如果用户选择选项 13，则随附的其余信息将显示在以下四个文本框中

我希望我不会太困惑并且可以得到帮助:(非常感谢。

var programs = new Array();
programs[0] = ["Option One of Five Categories","Random information to display in text box one","Random information to display in text box two","Option 1","Random information to display in text box three","Random information to display in text box four"];
programs[1] = ["Option One of Five Categories","Random information to display in text box one","Random information to display in text box two","Option 2","Random information to display in text box three","Random information to display in text box four"];
programs[2] = ["Option One of Five Categories","Random information to display in text box one","Random information to display in text box two","Option 3","Random information to display in text box three","Random information to display in text box four"];
programs[3] = ["Option One of Five Categories","Random information to display in text box one","Random information to display in text box two","Option 4","Random information to display in text box three","Random information to display in text box four"];
programs[4] = ["Option Two of Five Categories","Random information to display in text box one","Random information to display in text box two","Option 5","Random information to display in text box three","Random information to display in text box four"];
programs[5] = ["Option Two of Five Categories","Random information to display in text box one","Random information to display in text box two","Option 6","Random information to display in text box three","Random information to display in text box four"];
programs[6] = ["Option Two of Five Categories","Random information to display in text box one","Random information to display in text box two","Option 7","Random information to display in text box three","Random information to display in text box four"];
programs[7] = ["Option Two of Five Categories","Random information to display in text box one","Random information to display in text box two","Option 8","Random information to display in text box three","Random information to display in text box four"];
programs[8] = ["Option Two of Five Categories","Random information to display in text box one","Random information to display in text box two","Option 9","Random information to display in text box three","Random information to display in text box four"];
programs[9] = ["Option Three of Five Categories","Random information to display in text box one","Random information to display in text box two","Option 10","Random information to display in text box three","Random information to display in text box four"];
programs[10] = ["Option Three of Five Categories","Random information to display in text box one","Random information to display in text box two","Option 11","Random information to display in text box three","Random information to display in text box four"];
programs[11] = ["Option Three of Five Categories","Random information to display in text box one","Random information to display in text box two","Option 12","Random information to display in text box three","Random information to display in text box four"];
programs[12] = ["Option Three of Five Categories","Random information to display in text box one","Random information to display in text box two","Option 13","Random information to display in text box three","Random information to display in text box four"];
programs[13] = ["Option Three of Five Categories","Random information to display in text box one","Random information to display in text box two","Option 14","Random information to display in text box three","Random information to display in text box four"];
programs[14] = ["Option Four of Five Categories","Random information to display in text box one","Random information to display in text box two","Option 15","Random information to display in text box three","Random information to display in text box four"];
programs[15] = ["Option Four of Five Categories","Random information to display in text box one","Random information to display in text box two","Option 16","Random information to display in text box three","Random information to display in text box four"];
programs[16] = ["Option Four of Five Categories","Random information to display in text box one","Random information to display in text box two","Option 17","Random information to display in text box three","Random information to display in text box four"];
programs[17] = ["Option Four of Five Categories","Random information to display in text box one","Random information to display in text box two","Option 18","Random information to display in text box three","Random information to display in text box four"];
programs[18] = ["Option Four of Five Categories","Random information to display in text box one","Random information to display in text box two","Option 19","Random information to display in text box three","Random information to display in text box four"];
programs[19] = ["Option Five of Five Categories","Random information to display in text box one","Random information to display in text box two","Option 20","Random information to display in text box three","Random information to display in text box four"];
programs[20] = ["Option Five of Five Categories","Random information to display in text box one","Random information to display in text box two","Option 21","Random information to display in text box three","Random information to display in text box four"];
programs[21] = ["Option Five of Five Categories","Random information to display in text box one","Random information to display in text box two","Option 21","Random information to display in text box three","Random information to display in text box four"];
programs[22] = ["Option Five of Five Categories","Random information to display in text box one","Random information to display in text box two","Option 22","Random information to display in text box three","Random information to display in text box four"];
programs[23] = ["Option Five of Five Categories","Random information to display in text box one","Random information to display in text box two","Option 24","Random information to display in text box three","Random information to display in text box four"];

Answer 1

下面我为您提供了满足您需要的代码，但我不想要硬编码的值，所以我动态创建了数组。而且您创建的方式也不是首选方式，如果您想要一个遵循数组格式的代码，就像您在评论中告诉我的那样。

<select id="drop1" onchange="changeValueDrop2()">
</select>

<br><br><br>

<select id="drop2">

</select>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
	
	var obj=[];
	
	
	function changeValueDrop2(){
		
		var parentval=$('#drop1').val();
		$('#drop2').empty();
		
		for(i=0;i<obj.length;i++){
			var bean=obj[i];
			
			if(parentval==bean.parentid){
				$('#drop2').append('<option value="'+bean.dd2_text+'">parentid : '+bean.dd2_text+'</option>');
			}
		}
	
	}
	
	
	$(document).ready(function(){
		console.log("Hellosss");
		
		for(i=0;i<=15;i++){
			$('#drop1').append('<option value="'+i+'">parent '+i+'</option>');
			for(b=1;b<=10;b++)
			{
				var bean ={
					dd2_text : 'parentid : '+i +', childid : '+((i)*10+b),
					parentid : i,
				}
				obj.push(bean);
			}
		}
		
		changeValueDrop2();
		console.log(obj);
	});

</script>