如何从 html 的多个下拉列表中仅选择唯一值

How can I select only Unique values from multiple dropdown in html?

本文关键字：选择 唯一 下拉列表 html      更新时间：2023-09-26

嗨，我只需要从多个下拉列表中选择唯一值，dropwown框无法修复它们正在动态渲染，因此可以根据下拉值在下拉框中进行任意数量的下拉列表。

所以我希望如果用户选择已在任何其他下拉列表中选择的相同值，应该在那里生成警报消息

<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>

我怎样才能做到这一点。

谢谢

<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>

首先，你们应该自己研究更多，不要指望我们为您提供完整的代码。

话虽如此，您可以相对容易地做到这一点，您将需要检查其他两个选择框的选定值，更改应该不会那么难

更改功能：https://api.jquery.com/change/

价值函数：http://api.jquery.com/val/

也许你可以使用这个.老实说，这是简单的事情，任何像我这样的新手都可以编写这段代码。

正如专家所说，请在发布问题之前进行研究。 

$("#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
    }
});
相关文章：