two_list.html 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. <HTML>
  2. <HEAD><TITLE>動態下拉式選單 (二階層):</Title></Head>
  3. <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  4. <FORM Name="myForm" action="{{ url_for('Inquire_from') }}" method="POST">
  5. 第一個下拉式選單名稱為 color
  6. :
  7. <select name="Test1" OnChange="Buildkey(this.selectedIndex);">
  8. <tr>
  9. <option value="" selected></option>
  10. {% for i1 in labels1 %}
  11. <option>{{i1}}</option>
  12. {% endfor %}
  13. </tr>
  14. </select>
  15. <BR>
  16. 第二個下拉式選單名稱為 fruit
  17. :
  18. <select name="Test2" OnChange="Buildkey1(this.selectedIndex);">
  19. <tr>
  20. <option value="" selected></option>
  21. {% for i1 in labels2 %}
  22. <option>{{i1}}</option>
  23. {% endfor %}
  24. </tr>
  25. </select>
  26. <select name="Test3" OnChange="Buildkey2(this.selectedIndex);">
  27. <tr>
  28. <option value="" selected></option>
  29. {% for i1 in labels3 %}
  30. <option>{{i1}}</option>
  31. {% endfor %}
  32. </tr>
  33. </select>
  34. <select name="Test4">
  35. <tr>
  36. <option value="" selected></option>
  37. {% for i1 in labels4 %}
  38. <option>{{i1}}</option>
  39. {% endfor %}
  40. </tr>
  41. </select>
  42. <button type='submit'>Submit</button>
  43. </Form>
  44. </Body>
  45. </Html>
  46. <SCRIPT Language="JavaScript">
  47. key=new Array();
  48. var y = 39;
  49. var z = 40;
  50. key[0]=['','1','11','111'];
  51. key[1]=['','清洗桶組立','發酵桶組立','乾燥桶組立'];
  52. key[2]=['','3',y,z];
  53. key1=new Array();
  54. key1[0]=['','4','44','444'];
  55. key1[1]=['','三通閥A組立','三通閥B組立','三通閥C組立'];
  56. key1[2]=['',"6","66","666"];
  57. key2=new Array();
  58. key2[0]=['','M6x5止付螺絲','M4x12螺絲','M4螺帽'];
  59. key2[1]=['','8','88','888'];
  60. key2[2]=['',"9","99","999"];
  61. function Buildkey(num)
  62. {
  63. document.myForm.Test2.selectedIndex=0;
  64. for(ctr=0;ctr<key[num].length;ctr++){
  65. document.myForm.Test2.options[ctr]=new Option(key[num][ctr],key[num][ctr]);
  66. }
  67. document.myForm.Test2.length=key[num].length;
  68. }
  69. function Buildkey1(num)
  70. {
  71. document.myForm.Test3.selectedIndex=0;
  72. for(ctr=0;ctr<key1[num].length;ctr++){
  73. document.myForm.Test3.options[ctr]=new Option(key1[num][ctr],key1[num][ctr]);
  74. }
  75. document.myForm.Test3.length=key1[num].length;
  76. }
  77. function Buildkey2(num)
  78. {
  79. document.myForm.Test4.selectedIndex=0;
  80. for(ctr=0;ctr<key2[num].length;ctr++){
  81. document.myForm.Test4.options[ctr]=new Option(key2[num][ctr],key2[num][ctr]);
  82. }
  83. document.myForm.Test4.length=key2[num].length;
  84. }
  85. </Script>