2016-02-12 83 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 
    } 
}); 
相關問題