如何检查 select 框中的值是否更相似 | JavaScript

Question

我是 JavaScript 的新人，我有一个问题。我有几个 select 个盒子，我必须确保没有相似的盒子。我有喜欢的代码。

<select id="science_1">
 <option value="0">0</option>
 <option value="1">1</option>
 <option value="2">2</option>
</select>

<select id="science_2">
 <option value="0">0</option>
 <option value="1">1</option>
 <option value="2">2</option>
</select>

<select id="science_3">
 <option value="0">0</option>
 <option value="1">1</option>
 <option value="2">2</option>
</select>

所以我的 JavaScript 代码是这样的：

var science_array = [];
var science_count = 0;

$(".science-switch").on("click", "a", function (e) {
    e.preventDefault();

    if (science_count === 3) {

        var select = $(this);
        var type = select.data('type');

        $(".science-switch-type").removeClass("active");
        $(".science-switch a").removeClass("active");

        select.addClass("active");

        $("#type-" + type).addClass("active");
    }
});

$(".u-switch").on("click", "a", function (e) {
    e.preventDefault();
    var select = $(this);
    var type = select.data('type');

    $(".u-switch a").removeClass("active");

    select.addClass("active");

    $(".u-type").removeClass("active");
    $("#type-" + type).addClass("active");
});

$(".btn-switch").on("click", function (e) {
    e.preventDefault();
    var select = $(this);
    var type = select.data('type');

    if (select.hasClass("btn-active")) {
        $(".science-switch-type").removeClass("active");
        $(".science-switch a").removeClass("active");

        $(".science-switch").find("[data-type=priority]").addClass("active");
        $("#type-" + type).addClass("active");
    }
});

$(".science-cb").on("click", ".item", function (e) {
    e.preventDefault();
    var el = $(this);
    var check = el.data('check');
    if (check === 1) {
        if (el.hasClass("active")) {
            el.removeClass("active");

            science_array = jQuery.grep(science_array, function (value) {
                return value !== el.data("id");
            });

        } else {
            science_count = $(".science-cb .item.active").length;
            if (science_count > 2) {
                alert("You can Select Only 3 Box!")
            } else {
                el.addClass("active");
                science_array.push(el.data("id"));
            }
        }

        science_count = $(".science-cb .item.active").length;

        if (science_count === 3) {
            $(".btn-switch").addClass("btn-active");
            $(".btn-switch").removeClass("btn-disabled");
            $(".btn-switch").trigger("click");
        } else {
            $(".btn-switch").addClass("btn-disabled");
            $(".btn-switch").removeClass("btn-active");
        }
        all_sciences();
    }
});


function all_sciences() {
    var selectValues = [];
    selectValues.length = 0;
    console.log("............");

    $.each(science_array, function (key, value) {
        selectValues.push({text: sciences[value][0], value: value})
    });

    $('.all-sciences').empty();

    $.each(selectValues, function (key, value) {
        $('.all-sciences')
            .append($("<option></option>")
                .attr("value", value['value'])
                .text(value['text']));
    });

    $("#science_1").val(science_array[0]);
    $("#science_2").val(science_array[1]);
    $("#science_3").val(science_array[2]);
}});

所以我希望用户 select 3 个数字但数字必须等于 1,2,3, 2,1,3 或 3,2,1 但不能是 2,2 ,1 与 1,1,3 或 1,1,1 等。我该怎么做？

谢谢！

Answer 1

我无法理解您脚本的某些部分。我稍微修改了你的html。我在每个 select 框中插入了一个没有值的选项。一旦完成所有 select 离子，我检查了重复的 select 离子。如果没有重复，那么我用最终的 select 离子填充了一个 select 框，否则让它为空。希望这有帮助。

       <h3>Science</h3>
       <select id="science_1" class="science" onchange="all_sciences();">
        <option value="">Please select</option>
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
       </select>

       <select id="science_2" class="science"  onchange="all_sciences();">
        <option value="">Please select</option>
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
       </select>

       <select id="science_3" class="science"  onchange="all_sciences();">
        <option value="">Please select</option>
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
       </select>
       <h5>Final selection</h5>
       <select id="all-sciences" class="all-sciences"></select>

    <script>

    function all_sciences() {
        var selectValues = [];
        selectValues.length = 0;
        console.log("............");

        var allSelected = 0;

        var science_array = {};
        var allVals = [];

        $( ".science" ).each(function() {
             var thisId = $(this).attr('id');
             var thisVal = $(this).val();
             //console.log(thisId + "  " + thisVal);
             science_array[thisId] = thisVal;
             allVals.push(thisVal);
        });


        $.each(science_array, function (key, value) {
            if(value!=""){
                allSelected++;    
            }
            console.log(key + "  " + value);
        });

        if(allSelected == 3){
            var distinct = chkDuplicates(allVals,true);
            console.log(distinct);

            if(distinct) {
                alert("Please select courses so that there are no duplicate selections.");
                $('.all-sciences').empty();
            }
            else {
                $('.all-sciences').empty();
                $.each(science_array, function (key, value) {
                    $('#all-sciences').append('<option value="' + value + '">' + key + ' - course ' + value +'</option>');
                });                
            }                

        }

    }


    function chkDuplicates(arr,justCheck){
      var len = arr.length, tmp = {}, arrtmp = arr.slice(), dupes = [];
      arrtmp.sort();
      while(len--){
       var val = arrtmp[len];
       if (/nul|nan|infini/i.test(String(val))){
         val = String(val);
        }
        if (tmp[JSON.stringify(val)]){
           if (justCheck) {return true;}
           dupes.push(val);
        }
        tmp[JSON.stringify(val)] = true;
      }
      return justCheck ? false : dupes.length ? dupes : null;
    }        

    </script>

如何检查 select 框中的值是否更相似 | JavaScript

How to check if values similer in select box | JavaScript

javascript

html

select

box