2016-02-12 54 views
-2

您好,我需要从多个下拉列表中选择唯一的值,dropwown框不能修复它们正在动态呈现,因此可以是基于下拉列表的任何数量的下拉列表,都位于下拉框中。如何从html中的多个下拉列表中选择唯一值?

所以我想,如果用户选择这是在任何其他下拉已经选择相同的值应该是有生成警报消息有

<select name="profile1" id="profile1" > 
     <option value="1">Delhi</option> 
     <option value="2">Mumbai</option> 
     <option value="3">Kanpur</option> 

    </select> 

<select name="profile1" id="profile2" > 
     <option value="1">Delhi</option> 
     <option value="2">Mumbai</option> 
     <option value="3">Kanpur</option> 

    </select> 

<select name="profile1" id="profile3" > 
     <option value="1">Delhi</option> 
     <option value="2">Mumbai</option> 
     <option value="3">Kanpur</option> 

    </select> 

我怎样才能做到这一点。

感谢

+4

你尝试/研究什么? – Utkanos

+0

IMO更好,如果您使用选择'multiple'而不是重复相同的选择。 –

+0

如果您禁用已经使用过的选择,那将会是更友好的用户体验 – charlietfl

回答

1
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script> 

    $(document).ready(function() { 

     $('select').change(function() { 

      if ($('select option[value="' + $(this).val() + '"]:selected').length > 1) 
      { 
       alert('you have already selected this item') 
      } 
     }); 
    }); 
</script> 
</head> 

<body> 


<select name="profile1" id="profile1" > 
     <option value="1">Delhi</option> 
     <option value="2">Mumbai</option> 
     <option value="3">Kanpur</option> 

    </select> 

<select name="profile1" id="profile2" > 
     <option value="1">Delhi</option> 
     <option value="2">Mumbai</option> 
     <option value="3">Kanpur</option> 

    </select> 

<select name="profile1" id="profile3" > 
     <option value="1">Delhi</option> 
     <option value="2">Mumbai</option> 
     <option value="3">Kanpur</option> 

    </select> 
</body> 

</html> 
0

,你首先应该研究多一些自己而不是指望我们提供您完整的代码。

虽这么说,你可以relativly容易做到这一点,你将需要检查的对变化的另外两个其他选择框选定的值不应该这么难

变化功能:https://api.jquery.com/change/

值功能: http://api.jquery.com/val/

0

可能你可以使用这个。老实说,这很容易,像我这样的新手都可以写这段代码。

正如专家所说,在发布问题之前请亲切研究。

$("#profile2").change(function() 
{ 
    var firstvalue=$("#profile1 option:selected").text(); 
    var secondvalue=$("#profile2 option:selected").text(); 
    if(firstvalue == secondvalue) 
    { 
     //alert message 
     //do something 
    } 
}); 


$("#profile3").change(function() 
{ 
    var firstvalue=$("#profile1 option:selected").text(); 
    var secondvalue=$("#profile2 option:selected").text(); 
    var thirdvalue=$("#profile2 option:selected").text(); 
    if(firstvalue == thirdvalue || thirdvalue == secondvalue) 
    { 
     //alert message 
     //do something 
    } 
}); 
相关问题