Цитирование через два раскрывающихся списка для заполнения текстовых полей

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>