当列表中存在重复值时显示警报消息

Question

我有两列，如图所示。当我单击 right 按钮时，所选字段将转到第 2 列，但我有 4 个字段已经来自数据库，现在如果我将名字移到第 2 列，它也会接受，但是如果已经选择了值

，我需要将错误消息显示为"duplicates are not allowed"

  "click #lstBox1 > option": function(e){            
        var selectedOpts = $('#lstBox1 option:selected');
        if (selectedOpts.length == 0) {
            alert("Nothing to move.");
            e.preventDefault();
        }
        $('#lstBox2').append($(selectedOpts).clone());
        $(selectedOpts).remove();
        e.preventDefault();
        var text = $(e.target).text();            
        var result = this.data.filter(function (obj) {
            return obj.columnsexpo === text;
        });
        if (_.isEmpty(result)) {
            this.data.push({columnsexpo: text, placeholder: true });
            this.tab.handsontable("loadData", this.data);
            console.log(this.data);
        }
    },
  "click #lstBox2 > option": function(e){
        var selectedOpts = $('#lstBox2 option:selected');            
        $('#lstBox1').append($(selectedOpts).clone());
        $(selectedOpts).remove();
        e.preventDefault();
        var text = $(e.target).text();
       // console.log(text);
        var result = this.data.filter(function (obj) {
            return obj.columnsexpo === text;
        });

            this.data.pop({ columnsexpo: text, placeholder: true });
            this.tab.handsontable("loadData", this.data);
            console.log(this.data);

    },

Answer 1

试图重新创建一个丑陋的代码副本。

我的代码所做的是，在 button click 上它得到 span element，这是 clicked。

此元素然后存储在 variable and removed from the left side div.

中

right side div 中存在的所有 text data in span 都被取出并存储在 array 中。

left div 中 selected span 的文本与 right div 中所有 spans 中存在的文本进行比较。

如果找到匹配项，则会发出警报。存储 left div span 的变量然后是 appended 到 right side div.

    var tomove;
    var selected;
    $('span').click(function(){tomove=$(this).text();selected=$(this)})
    $("button").click(function(){

selected.remove();
var t=$('#right > span');
var str=$(t).text().toString();
var arr=str.split('');
   var txt=$(selected).text().toString();
console.log(txt)

    if(arr.includes(txt))
    {
        alert("Duplicates aren't allowed!")
    }
else
{  $("#right").append(selected);}

  

    })

 div{

            border-color: blue;
            border-style: solid;
            border-width: 1px;
        }
        span
        {
            border-color:green;
            border-style: solid;
            border-width: 1px;
        }
        #right
        {
            margin-left:100px;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script
  src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
  crossorigin="anonymous"></script>
    
       
</head>
<body id="body">
    <div id="left">
<span>a</span><br>
<span>s</span><br>
<span>d</span><br>
<span>f</span><br>
<span>g</span><br>

    </div>
    <div id="right">
            <span>e</span><br>
            <span>r</span><br>
            <span>g</span><br>
            <span>w</span><br>
            <span>g</span><br>

    </div>
    <button id="move">Move</button>
    
   </body>
   
</html>

当列表中存在重复值时显示警报消息

Show alert message when duplicate values are present in a list

html

javascript

css

jquery

handsontable