通過兩個下拉選擇循環填充文本框

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>