Javascript 选择框不返回预期值

我有一个表单，它将根据第一个选择框显示不同的选项

如果选择了选项1，则会显示第二个下拉列表，其中预选了一个选项。如果选择选项2，则将显示包含两个选项的不同下拉列表

这两个新的下拉列表将具有相同的ID和名称，用于将选项传递到后端，但它会不断返回错误的值。这是一个

我将使用：
选择计划
管理我自己的项目
管理其他项目
系统计划：

选择计划
独奏
系统计划：

选择计划
计划业务
计划最大值




提交
//jquery
$（“div[class^='js-rentpro-plan-']]）hide（）；
$（'.js rp use'）.change（函数（）{
$（“#js rp计划文本，.js rentpro计划单播，.js rentpro计划其他”）.hide（）；
if（$（this）.val（）=='SOLO'）{
$（'.js rentpro plan solo'）.show（）；
}else if（$（this）.val（）=='OTHER'）{
$（'.js rentpro plan other'）.show（）；
}否则{
$（“#js rp平面图文本”）.show（）；
}
});
$（“#提交”）。单击（函数（）{
log（'计划id为：'+$（'#计划id'）.val（））；
});

ID必须是唯一的。不要使用相同的id，而是使用类

获取错误值的原因是您使用的是

$（'#plan_id'）。val（）

它将返回找到的第一个匹配项的值

编辑：
要使用当前结构获得正确的值，可以使用：

var vl = $(this).siblings('div:visible').find('select').val()
console.log('plan id is: ' + vl );

但是我建议您修改结构，将它们包装成一个表单，给您的select容器提供相同的类，这样您就可以更容易地访问它们

您的选择器将始终使用第一个匹配项，无论您使用的是元素、类还是id。或者使用的是类，您可以：

$('.signup-select:visible').val()

---

我有它，所以另一个id是隐藏的，只有一个显示过。我现在改为使用类，但当我提交表单时，仍然得到了错误的值。上面的代码没有使用类，所以它不会有任何区别，除非您更改了结构，在这种情况下，如果您将其发布以便我可以查看，这将是很好的。如果您的意思是您将其更改为类并像

$（'.plan_id'）.val（）那样调用它，则不会有任何区别，您仍将获得第一个匹配的值。（即使是隐藏的）没有即时通讯使用后端的帖子来获取数据。选项2正常工作，按预期返回2和3，但选项1和solo继续返回-1。我看到它在第2个选项（隐藏选择）中得到了-1作为第一个选项
$('.signup-select:visible').val()