javascript - 如何验证从多个下拉列表中选择的值？

Question

例如，我们有这 3 个选择标签。

• 选择#1 -> 奥迪
• 选择#2 -> 萨博
• 选择#3 -> 奥迪

那么当我们更新或选择它时，如何检查所有选择标签中所有选定值的有效性？以及如何阻止它提交？

HTML

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option value="audi" selected>Audi</option>
</select>

<select>
  <option value="volvo">Volvo</option>
  <option value="saab" selected>Saab</option>
  <option value="vw">VW</option>
  <option value="audi">Audi</option>
</select>

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option value="audi" selected>Audi</option>
</select>

Answer 1

您可以使用 jQuery this 来获取验证部分。首先获取所选的新值，然后检查其他 select 标记的值，如果匹配，则触发重复。

这是一个示例 JSFiddle

$("select").change(function(){
var newVal = $(this).val();

$(this).siblings().each(function(){
if($(this).val() == newVal)
{
alert("duplicate");
}
});

});

-帮助:)