根据其他选择更改动态添加的下拉菜单的选项

Question

<Form.Item>proprules是一个数组，因此您可以向其中添加许多规则。如果你想检查电子邮件输入是否不为空，同时是一个有效的电子邮件，你可以这样做：<Form.Item  label="Email"  name="email"  rules={[    {      required: true,      message: "Please input your email!",    },    {      pattern: /your email regex here/,      message: "Invalid email format",    },  ]}>  <Input /></Form.Item>不需要额外的验证功能。如果不符合指定的正则表达式，将自动显示错误。你可以在这里看到ant design input的所有规则

Answer 1

你的逻辑有点incorrect早 - 棘手的部分是你正在检查flang并且20,25但是else if放在最后从未达到那个点。

选项threadedwith'10', '15', '20', '25'被放在最前面if，所以不管true自从condition匹配

此外，您还需要在 HTML 中使用onchange函数而不是函数。函数用于改变或。onclickonchangeselectioncheckboxes

现场工作演示：（所有工作均按要求进行）

$(document).ready(function() {

  var list1 = document.getElementById('firstList');

  list1.options[1] = new Option('Thread/Solder', 'Thread/Solder');

  list1.options[2] = new Option('Flange/Groove', 'Flange/Groove');

});

function getValveSize() {

  var list1 = document.getElementById('firstList');

  var list2 = document.getElementById("secondList");

  var list1SelectedValue = list1.options[list1.selectedIndex].value;

  if (list1SelectedValue === 'Thread/Solder') {

    list2.options.length = 0;

    list2.options[0] = new Option('DN', '');

    list2.options[1] = new Option('10', '10');

    list2.options[2] = new Option('15', '15');

    list2.options[3] = new Option('20', '20');

    list2.options[4] = new Option('25', '25');

    list2.options[5] = new Option('32', '32');

    list2.options[6] = new Option('40', '40');

    list2.options[7] = new Option('50', '50');

    list2.options[8] = new Option('65', '65');

  } else if (list1SelectedValue === 'Flange/Groove') {

    list2.options.length = 0;

    list2.options[0] = new Option('DN', '');

    list2.options[1] = new Option('20', '20');

    list2.options[2] = new Option('25', '25');

    list2.options[3] = new Option('32', '32');

    list2.options[4] = new Option('40', '40');

    list2.options[5] = new Option('50', '50');

    list2.options[6] = new Option('65', '65');

    list2.options[7] = new Option('80', '80');

    list2.options[8] = new Option('100', '100');

    list2.options[9] = new Option('125', '125');

    list2.options[10] = new Option('150', '150');

    list2.options[11] = new Option('200', '200');

    list2.options[12] = new Option('250', '250');

    list2.options[13] = new Option('300', '300');

    list2.options[14] = new Option('350', '350');

    list2.options[15] = new Option('400', '400');

  }

}

function getTurns() {

  var list1 = document.getElementById('firstList');

  var list2 = document.getElementById('secondList');

  var list3 = document.getElementById('thirdList');

  var list1SelectedValue = list1.options[list1.selectedIndex].value;

  var list2SelectedValue = list2.options[list2.selectedIndex].value;

  if (list1SelectedValue == 'Flange/Groove' && $.inArray(list2SelectedValue, ['20', '25']) >= 0) {

    list3.options.length = 0;

    list3.options[0] = new Option('1', '1');

    list3.options[1] = new Option('1.1', '1.1');

    list3.options[2] = new Option('1.2', '1.2');

    list3.options[3] = new Option('1.3', '1.3');

    list3.options[4] = new Option('1.4', '1.4');

    list3.options[5] = new Option('1.5', '1.5');

    list3.options[6] = new Option('1.6', '1.6');

    list3.options[7] = new Option('1.7', '1.7');

    list3.options[8] = new Option('1.8', '1.8');

    list3.options[8] = new Option('1.9', '1.9');

    list3.options[9] = new Option('2', '2');

    list3.options[10] = new Option('2.1', '2.1');

    list3.options[11] = new Option('2.2', '2.2');

    list3.options[12] = new Option('2.3', '2.3');

    list3.options[13] = new Option('2.4', '2.4');

    list3.options[14] = new Option('2.5', '2.5');

    list3.options[15] = new Option('2.6', '2.6');

    list3.options[16] = new Option('2.7', '2.7');

    list3.options[17] = new Option('2.8', '2.8');

    list3.options[18] = new Option('2.9', '2.9');

    list3.options[19] = new Option('3', '3');

    list3.options[20] = new Option('3.1', '3.1');

    list3.options[21] = new Option('3.2', '3.2');

    list3.options[22] = new Option('3.3', '3.3');

    list3.options[23] = new Option('3.4', '3.4');

    list3.options[24] = new Option('3.5', '3.5');

    list3.options[25] = new Option('3.6', '3.6');

    list3.options[26] = new Option('3.7', '3.7');

    list3.options[27] = new Option('3.8', '3.8');

    list3.options[28] = new Option('3.9', '3.9');

    list3.options[29] = new Option('4', '4');

    list3.options[30] = new Option('4.1', '4.1');

    list3.options[31] = new Option('4.2', '4.2');

    list3.options[32] = new Option('4.3', '4.3');

    list3.options[33] = new Option('4.4', '4.4');

    list3.options[34] = new Option('4.5', '4.5');

    list3.options[35] = new Option('4.6', '4.6');

    list3.options[36] = new Option('4.7', '4.7');

    list3.options[37] = new Option('4.8', '4.8');

    list3.options[38] = new Option('4.9', '4.9');

    list3.options[39] = new Option('5', '5');

    list3.options[40] = new Option('5.1', '5.1');

    list3.options[41] = new Option('5.2', '5.2');

    list3.options[42] = new Option('5.3', '5.3');

    list3.options[43] = new Option('5.4', '5.4');

    list3.options[44] = new Option('5.5', '5.5');

    list3.options[45] = new Option('5.6', '5.6');

    list3.options[46] = new Option('5.7', '5.7');

    list3.options[47] = new Option('5.8', '5.8');

    list3.options[48] = new Option('5.9', '5.9');

    list3.options[49] = new Option('6', '6');

    list3.options[50] = new Option('6.1', '6.1');

    list3.options[51] = new Option('6.2', '6.2');

    list3.options[52] = new Option('6.3', '6.3');

    list3.options[53] = new Option('6.4', '6.4');

    list3.options[54] = new Option('6.5', '6.5');

    list3.options[55] = new Option('6.6', '6.6');

    list3.options[56] = new Option('6.7', '6.7');

    list3.options[57] = new Option('6.8', '6.8');

    list3.options[58] = new Option('6.9', '6.9');

    list3.options[59] = new Option('7', '7');

  } else if ($.inArray(list2SelectedValue, ['32', '40', '50']) >= 0) {

    list3.options.length = 0;

    list3.options[0] = new Option('Turns', '');

    list3.options[1] = new Option('0.25', '0.25');

    list3.options[2] = new Option('0.5', '0.5');

    list3.options[3] = new Option('0.75', '0.75');

    list3.options[4] = new Option('1', '1');

    list3.options[5] = new Option('1.1', '1.1');

    list3.options[6] = new Option('1.2', '1.2');

    list3.options[7] = new Option('1.3', '1.3');

    list3.options[8] = new Option('1.4', '1.4');

    list3.options[9] = new Option('1.5', '1.5');

    list3.options[10] = new Option('1.6', '1.6');

    list3.options[11] = new Option('1.7', '1.7');

    list3.options[12] = new Option('1.8', '1.8');

    list3.options[13] = new Option('1.9', '1.9');

    list3.options[14] = new Option('2', '2');

    list3.options[15] = new Option('2.1', '2.1');

    list3.options[16] = new Option('2.2', '2.2');

    list3.options[17] = new Option('2.3', '2.3');

    list3.options[18] = new Option('2.4', '2.4');

    list3.options[19] = new Option('2.5', '2.5');

    list3.options[20] = new Option('2.6', '2.6');

    list3.options[21] = new Option('2.7', '2.7');

    list3.options[22] = new Option('2.8', '2.8');

    list3.options[23] = new Option('2.9', '2.9');

    list3.options[24] = new Option('3', '3');

    list3.options[25] = new Option('3.1', '3.1');

    list3.options[26] = new Option('3.2', '3.2');

    list3.options[27] = new Option('3.3', '3.3');

    list3.options[28] = new Option('3.4', '3.4');

    list3.options[29] = new Option('3.5', '3.5');

    list3.options[30] = new Option('3.6', '3.6');

    list3.options[31] = new Option('3.7', '3.7');

    list3.options[32] = new Option('3.8', '3.8');

    list3.options[33] = new Option('3.9', '3.9');

    list3.options[34] = new Option('4', '4');

    list3.options[35] = new Option('4.1', '4.1');

    list3.options[36] = new Option('4.2', '4.2');

    list3.options[37] = new Option('4.3', '4.3');

    list3.options[38] = new Option('4.4', '4.4');

    list3.options[39] = new Option('4.5', '4.5');

    list3.options[40] = new Option('4.6', '4.6');

    list3.options[41] = new Option('4.7', '4.7');

    list3.options[42] = new Option('4.8', '4.8');

    list3.options[43] = new Option('4.9', '4.9');

    list3.options[44] = new Option('5', '5');

    list3.options[45] = new Option('5.1', '5.1');

    list3.options[46] = new Option('5.2', '5.2');

    list3.options[47] = new Option('5.3', '5.3');

    list3.options[48] = new Option('5.4', '5.4');

    list3.options[49] = new Option('5.5', '5.5');

    list3.options[50] = new Option('5.6', '5.6');

    list3.options[51] = new Option('5.7', '5.7');

    list3.options[52] = new Option('5.8', '5.8');

    list3.options[53] = new Option('5.9', '5.9');

    list3.options[54] = new Option('6', '6');

    list3.options[55] = new Option('6.1', '6.1');

    list3.options[56] = new Option('6.2', '6.2');

    list3.options[57] = new Option('6.3', '6.3');

    list3.options[58] = new Option('6.4', '6.4');

    list3.options[59] = new Option('6.5', '6.5');

    list3.options[60] = new Option('6.6', '6.6');

    list3.options[61] = new Option('6.7', '6.7');

    list3.options[62] = new Option('6.8', '6.8');

    list3.options[63] = new Option('6.9', '6.9');

    list3.options[64] = new Option('7', '7');

    list3.options[65] = new Option('7.1', '7.1');

    list3.options[66] = new Option('7.2', '7.2');

    list3.options[67] = new Option('7.3', '7.3');

    list3.options[68] = new Option('7.4', '7.4');

    list3.options[69] = new Option('7.5', '7.5');

    list3.options[70] = new Option('7.6', '7.6');

    list3.options[71] = new Option('7.7', '7.7');

    list3.options[72] = new Option('7.8', '7.8');

    list3.options[73] = new Option('7.9', '7.9');

    list3.options[74] = new Option('8', '8');

    list3.options[75] = new Option('8.1', '8.1');

    list3.options[76] = new Option('8.2', '8.2');

    list3.options[77] = new Option('8.3', '8.3');

    list3.options[78] = new Option('8.4', '8.4');

    list3.options[79] = new Option('8.5', '8.5');

    list3.options[80] = new Option('8.6', '8.6');

    list3.options[81] = new Option('8.7', '8.7');

    list3.options[82] = new Option('8.8', '8.8');

    list3.options[83] = new Option('8.9', '8.9');

    list3.options[84] = new Option('9', '9');

    list3.options[85] = new Option('9.1', '9.1');

    list3.options[86] = new Option('9.2', '9.2');

    list3.options[87] = new Option('9.3', '9.3');

    list3.options[88] = new Option('9.4', '9.4');

    list3.options[89] = new Option('9.5', '9.5');

    list3.options[90] = new Option('9.6', '9.6');

    list3.options[91] = new Option('9.7', '9.7');

    list3.options[92] = new Option('9.8', '9.8');

    list3.options[93] = new Option('9.9', '9.9');

    list3.options[94] = new Option('10', '10');

  } else if ($.inArray(list2SelectedValue, ['65']) >= 0) {

    list3.options.length = 0;

    list3.options[0] = new Option('1', '1');

    list3.options[1] = new Option('1.1', '1.1');

    list3.options[2] = new Option('1.2', '1.2');

    list3.options[3] = new Option('1.3', '1.3');

    list3.options[4] = new Option('1.4', '1.4');

    list3.options[5] = new Option('1.5', '1.5');

    list3.options[6] = new Option('1.6', '1.6');

    list3.options[7] = new Option('1.7', '1.7');

    list3.options[8] = new Option('1.8', '1.8');

    list3.options[9] = new Option('1.9', '1.9');

    list3.options[10] = new Option('2', '2');

    list3.options[11] = new Option('2.1', '2.1');

    list3.options[12] = new Option('2.2', '2.2');

    list3.options[13] = new Option('2.3', '2.3');

    list3.options[14] = new Option('2.4', '2.4');

    list3.options[15] = new Option('2.5', '2.5');

    list3.options[16] = new Option('2.6', '2.6');

    list3.options[17] = new Option('2.7', '2.7');

    list3.options[18] = new Option('2.8', '2.8');

    list3.options[19] = new Option('2.9', '2.9');

    list3.options[20] = new Option('3', '3');

    list3.options[21] = new Option('3.1', '3.1');

    list3.options[22] = new Option('3.2', '3.2');

    list3.options[23] = new Option('3.3', '3.3');

    list3.options[24] = new Option('3.4', '3.4');

    list3.options[25] = new Option('3.5', '3.5');

    list3.options[26] = new Option('3.6', '3.6');

    list3.options[27] = new Option('3.7', '3.7');

    list3.options[28] = new Option('3.8', '3.8');

    list3.options[29] = new Option('3.9', '3.9');

    list3.options[30] = new Option('4', '4');

    list3.options[31] = new Option('4.1', '4.1');

    list3.options[32] = new Option('4.2', '4.2');

    list3.options[33] = new Option('4.3', '4.3');

    list3.options[34] = new Option('4.4', '4.4');

    list3.options[35] = new Option('4.5', '4.5');

    list3.options[36] = new Option('4.6', '4.6');

    list3.options[37] = new Option('4.7', '4.7');

    list3.options[38] = new Option('4.8', '4.8');

    list3.options[39] = new Option('4.9', '4.9');

    list3.options[40] = new Option('5', '5');

    list3.options[41] = new Option('5.1', '5.1');

    list3.options[42] = new Option('5.2', '5.2');

    list3.options[43] = new Option('5.3', '5.3');

    list3.options[44] = new Option('5.4', '5.4');

    list3.options[45] = new Option('5.5', '5.5');

    list3.options[46] = new Option('5.6', '5.6');

    list3.options[47] = new Option('5.7', '5.7');

    list3.options[48] = new Option('5.8', '5.8');

    list3.options[49] = new Option('5.9', '5.9');

    list3.options[50] = new Option('6', '6');

    list3.options[51] = new Option('6.1', '6.1');

    list3.options[52] = new Option('6.2', '6.2');

    list3.options[53] = new Option('6.3', '6.3');

    list3.options[54] = new Option('6.4', '6.4');

    list3.options[55] = new Option('6.5', '6.5');

    list3.options[56] = new Option('6.6', '6.6');

    list3.options[57] = new Option('6.7', '6.7');

    list3.options[58] = new Option('6.8', '6.8');

    list3.options[59] = new Option('6.9', '6.9');

    list3.options[60] = new Option('7', '7');

    list3.options[61] = new Option('7.1', '7.1');

    list3.options[62] = new Option('7.2', '7.2');

    list3.options[63] = new Option('7.3', '7.3');

    list3.options[64] = new Option('7.4', '7.4');

    list3.options[65] = new Option('7.5', '7.5');

    list3.options[66] = new Option('7.6', '7.6');

    list3.options[67] = new Option('7.7', '7.7');

    list3.options[68] = new Option('7.8', '7.8');

    list3.options[69] = new Option('7.9', '7.9');

    list3.options[70] = new Option('8', '8');

    list3.options[71] = new Option('8.1', '8.1');

    list3.options[72] = new Option('8.2', '8.2');

    list3.options[73] = new Option('8.3', '8.3');

    list3.options[74] = new Option('8.4', '8.4');

    list3.options[75] = new Option('8.5', '8.5');

    list3.options[76] = new Option('8.6', '8.6');

    list3.options[77] = new Option('8.7', '8.7');

    list3.options[78] = new Option('8.8', '8.8');

    list3.options[79] = new Option('8.9', '8.9');

    list3.options[80] = new Option('9', '9');

    list3.options[81] = new Option('9.1', '9.1');

    list3.options[82] = new Option('9.2', '9.2');

    list3.options[83] = new Option('9.3', '9.3');

    list3.options[84] = new Option('9.4', '9.4');

    list3.options[85] = new Option('9.5', '9.5');

    list3.options[86] = new Option('9.6', '9.6');

    list3.options[87] = new Option('9.7', '9.7');

    list3.options[88] = new Option('9.8', '9.8');

    list3.options[89] = new Option('9.9', '9.9');

    list3.options[90] = new Option('10', '10');

    list3.options[91] = new Option('10.1', '10.1');

    list3.options[92] = new Option('10.2', '10.2');

    list3.options[93] = new Option('10.3', '10.3');

    list3.options[94] = new Option('10.4', '10.4');

    list3.options[95] = new Option('10.5', '10.5');

    list3.options[96] = new Option('10.6', '10.6');

    list3.options[97] = new Option('10.7', '10.7');

    list3.options[98] = new Option('10.8', '10.8');

    list3.options[99] = new Option('10.9', '10.9');

    list3.options[100] = new Option('11', '11');

    list3.options[101] = new Option('11.1', '11.1');

    list3.options[102] = new Option('11.2', '11.2');

    list3.options[103] = new Option('11.3', '11.3');

    list3.options[104] = new Option('11.4', '11.4');

    list3.options[105] = new Option('11.5', '11.5');

    list3.options[106] = new Option('11.6', '11.6');

    list3.options[107] = new Option('11.7', '11.7');

    list3.options[108] = new Option('11.8', '11.8');

    list3.options[109] = new Option('11.9', '11.9');

    list3.options[110] = new Option('12', '12');

  } else if ($.inArray(list2SelectedValue, ['10', '15', '20', '25']) >= 0) {

    list3.options.length = 0;

    list3.options[0] = new Option('Turns', '');

    list3.options[1] = new Option('0.25', '0.25');

    list3.options[2] = new Option('0.5', '0.5');

    list3.options[3] = new Option('0.75', '0.75');

    list3.options[4] = new Option('1', '1');

    list3.options[5] = new Option('1.1', '1.1');

    list3.options[6] = new Option('1.2', '1.2');

    list3.options[7] = new Option('1.3', '1.3');

    list3.options[8] = new Option('1.4', '1.4');

    list3.options[9] = new Option('1.5', '1.5');

    list3.options[10] = new Option('1.6', '1.6');

    list3.options[11] = new Option('1.7', '1.7');

    list3.options[12] = new Option('1.8', '1.8');

    list3.options[13] = new Option('1.9', '1.9');

    list3.options[14] = new Option('2', '2');

    list3.options[15] = new Option('2.1', '2.1');

    list3.options[16] = new Option('2.2', '2.2');

    list3.options[17] = new Option('2.3', '2.3');

    list3.options[18] = new Option('2.4', '2.4');

    list3.options[19] = new Option('2.5', '2.5');

    list3.options[20] = new Option('2.6', '2.6');

    list3.options[21] = new Option('2.7', '2.7');

    list3.options[22] = new Option('2.8', '2.8');

    list3.options[23] = new Option('2.9', '2.9');

    list3.options[24] = new Option('3', '3');

    list3.options[25] = new Option('3.1', '3.1');

    list3.options[26] = new Option('3.2', '3.2');

    list3.options[27] = new Option('3.3', '3.3');

    list3.options[28] = new Option('3.4', '3.4');

    list3.options[29] = new Option('3.5', '3.5');

    list3.options[30] = new Option('3.6', '3.6');

    list3.options[31] = new Option('3.7', '3.7');

    list3.options[32] = new Option('3.8', '3.8');

    list3.options[33] = new Option('3.9', '3.9');

    list3.options[34] = new Option('4', '4');

    list3.options[35] = new Option('4.1', '4.1');

    list3.options[36] = new Option('4.2', '4.2');

    list3.options[37] = new Option('4.3', '4.3');

    list3.options[38] = new Option('4.4', '4.4');

    list3.options[39] = new Option('4.5', '4.5');

    list3.options[40] = new Option("4.6", "4.6");

    list3.options[41] = new Option("4.7", "4.7");

    list3.options[42] = new Option("4.8", "4.8");

    list3.options[43] = new Option("4.9", "4.9");

    list3.options[44] = new Option("5", "5");

    list3.options[45] = new Option("5.1", "5.1");

    list3.options[46] = new Option("5.2", "5.2");

    list3.options[47] = new Option("5.3", "5.3");

    list3.options[48] = new Option("5.4", "5.4");

    list3.options[49] = new Option("5.5", "5.5");

    list3.options[50] = new Option("5.6", "5.6");

    list3.options[51] = new Option("5.7", "5.7");

    list3.options[52] = new Option("5.8", "5.8");

    list3.options[53] = new Option("5.9", "5.9");

    list3.options[54] = new Option("6", "6");

    list3.options[55] = new Option("6.1", "6.1");

    list3.options[56] = new Option("6.2", "6.2");

    list3.options[57] = new Option("6.3", "6.3");

    list3.options[58] = new Option("6.4", "6.4");

    list3.options[59] = new Option("6.5", "6.5");

    list3.options[60] = new Option("6.6", "6.6");

    list3.options[61] = new Option("6.7", "6.7");

    list3.options[62] = new Option("6.8", "6.8");

    list3.options[63] = new Option("6.9", "6.9");

    list3.options[64] = new Option("7", "7");

  }

  $('#thirdList').append(list3);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="valvetype">

  <select class="form-control" id='firstList' name='firstList' onchange="getValveSize()">

    <option disabled selected>Choose</option>

  </select>

  <select class="form-control" id='secondList' name='secondList' onchange="getTurns()">

    <option disabled selected>DN</option>

  </select>

  <select class="form-control" id='thirdList' name='thirdList'>

    <option disabled selected>Turns</option>

  </select>

  <button onclick="findInArray()" class="submit">Submit</button>

</div>