通过两个下拉选择循环填充文本框

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> 
 
\t 
 
\t var obj=[]; 
 
\t 
 
\t 
 
\t function changeValueDrop2(){ 
 
\t \t 
 
\t \t var parentval=$('#drop1').val(); 
 
\t \t $('#drop2').empty(); 
 
\t \t 
 
\t \t for(i=0;i<obj.length;i++){ 
 
\t \t \t var bean=obj[i]; 
 
\t \t \t 
 
\t \t \t if(parentval==bean.parentid){ 
 
\t \t \t \t $('#drop2').append('<option value="'+bean.dd2_text+'">parentid : '+bean.dd2_text+'</option>'); 
 
\t \t \t } 
 
\t \t } 
 
\t 
 
\t } 
 
\t 
 
\t 
 
\t $(document).ready(function(){ 
 
\t \t console.log("Hellosss"); 
 
\t \t 
 
\t \t for(i=0;i<=15;i++){ 
 
\t \t \t $('#drop1').append('<option value="'+i+'">parent '+i+'</option>'); 
 
\t \t \t for(b=1;b<=10;b++) 
 
\t \t \t { 
 
\t \t \t \t var bean ={ 
 
\t \t \t \t \t dd2_text : 'parentid : '+i +', childid : '+((i)*10+b), 
 
\t \t \t \t \t parentid : i, 
 
\t \t \t \t } 
 
\t \t \t \t obj.push(bean); 
 
\t \t \t } 
 
\t \t } 
 
\t \t 
 
\t \t changeValueDrop2(); 
 
\t \t console.log(obj); 
 
\t }); 
 

 
</script>