如何比較javascript中的列表框值和表值？

Question

在我的場景中，只需選擇列表框選項，該值和文本將附加到表行，但我面臨一些小問題，用戶不允許選擇相同的選項（已選擇的選項）並且用戶不允許在表..如果用戶選擇相同的選項顯示警報消息，例如“您已被選中，請選擇另一個選項”之類的..

這是我的示例代碼小提琴..

小提琴

示例片段在這里..

 $("#excist_supp").on("change", function() { $(".indexDrop").hide(); var newText = $("#excist_supp option:selected").text(); var newValue = $("#excist_supp option:selected").val(); $("#letterTable tbody").append('<tr><td><input type="text" id="sm_supp" value="' + newText + '" class="form-control newStyle1" name="sm_supp" readonly></td><td><input type="text" id="sm_code" value="' + newValue + '" class="form-control newStyle2" name="sm_code" readonly></td><td><button type="button" class="adRow ibtnDel newExcist" style="width:30%;position: relative;right: 25%; margin-bottom:0px">x</button></a></td></tr>'); $("#letterTable tr").each(function(i) { var count = (i) - 1; if (i === 0) return; var input1 = $(this).find('.newStyle1'); var input2 = $(this).find('.newStyle2'); // id input1.eq(0).attr("id", "sm_supp" + count); // Text fields input2.eq(0).attr("id", "sm_code" + count); // name input1.eq(0).attr("name", "sm_supp[" + count + "]"); // Text fields input2.eq(0).attr("name", "sm_code[" + count + "]"); }); }); /* compare two fields */ $('#excist_supp').change(function() { $("#letterTable tr").each(function(i) { var listVal = $('#excist_supp').val(); var tableVal = $('.newStyle2').val(); var nawTab = JSON.stringify(tableVal); if (listVal == nawTab) { alert('Matching!'); return true; } else { alert('Not matching!'); return false; } }); });

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <div class="row"> <!-- Existing Suppliers --> <div class="col-sm-6"> <div class="col-12"> <div class="row"> <div class="col-12"> <input class="form-control serch" id="supSearch" type="search" placeholder="Search Existing Suppliers.."> <div class="selector"> <select class="col-12 listbox newBox" name="List_0" size="20" id="excist_supp" style="height: 125px !important;"> <option class="indexDrop">Choose Existing Suppliers</option> <option value="0000">Komal </option> <option value="0001">Ranjeet</option> <option value="0002">Vishal </option> <option value="0003">Gaurav</option> <option value="0004">Dhanpat</option> <option value="0005">Joe</option> <option value="0006">Gowri</option> <option value="0007">shankar</option> <option value="0008">Dhanpat</option> </select> </div> </div> </div> </div> </div> <!-- Table --> <div class="col-5"> <div class="container"> <div class="row clearfix"> <div class="table-wrapper"> <div class="table-scroll"> <table id="letterTable" class="table table-bordered table-striped order-scroll order-list" style="width: 95%;"> <thead> <tr style="background-color: #680f79;color: #fff;"> <th class="text-center">Supplier Name</th> <th class="text-center">Supplier Code</th> <th class="text-center">Action</th> </tr> </thead> <tbody id="mytbody" style="text-align: center;"> </tbody> </table> </div> </div> </div> </div> </div> </div>

Answer 1

使用$("#excist_supp").on("change"....和$('#excist_supp').change(function()...你將同一個事件附加到同一個元素兩次。

您可以創建一個包含所有使用過的列表值的臨時數組，並使用Array.prototype.includes()創建一個函數來檢查當前值是否存在於該數組中。

嘗試以下方式：

 $("#excist_supp").on("change", function() { if(!checkValue()){ $(".indexDrop").hide(); var newText = $("#excist_supp option:selected").text(); var newValue = $("#excist_supp option:selected").val(); $("#letterTable tbody").append('<tr><td><input type="text" id="sm_supp" value="' + newText + '" class="form-control newStyle1" name="sm_supp" readonly></td><td><input type="text" id="sm_code" value="' + newValue + '" class="form-control newStyle2" name="sm_code" readonly></td><td><button type="button" class="adRow ibtnDel newExcist" style="width:30%;position: relative;right: 25%; margin-bottom:0px">x</button></a></td></tr>'); $("#letterTable tr").each(function(i) { var count = (i) - 1; if (i === 0) return; var input1 = $(this).find('.newStyle1'); var input2 = $(this).find('.newStyle2'); // id input1.eq(0).attr("id", "sm_supp" + count); // Text fields input2.eq(0).attr("id", "sm_code" + count); // name input1.eq(0).attr("name", "sm_supp[" + count + "]"); // Text fields input2.eq(0).attr("name", "sm_code[" + count + "]"); }); } }); /* compare two fields */ var temp = []; function checkValue() { var listVal = $('#excist_supp').val(); var tableVal = $('.newStyle2').val(); var nawTab = JSON.stringify(tableVal); if (temp.includes(listVal)) { alert('Matching!'); return true; } else { alert('Not matching!'); temp.push(listVal) return false; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <div class="row"> <!-- Existing Suppliers --> <div class="col-sm-6"> <div class="col-12"> <div class="row"> <div class="col-12"> <input class="form-control serch" id="supSearch" type="search" placeholder="Search Existing Suppliers.."> <div class="selector"> <select class="col-12 listbox newBox" name="List_0" size="20" id="excist_supp" style="height: 125px !important;"> <option class="indexDrop">Choose Existing Suppliers</option> <option value="0000">Komal </option> <option value="0001">Ranjeet</option> <option value="0002">Vishal </option> <option value="0003">Gaurav</option> <option value="0004">Dhanpat</option> <option value="0005">Joe</option> <option value="0006">Gowri</option> <option value="0007">shankar</option> <option value="0008">Dhanpat</option> </select> </div> </div> </div> </div> </div> <!-- Table --> <div class="col-5"> <div class="container"> <div class="row clearfix"> <div class="table-wrapper"> <div class="table-scroll"> <table id="letterTable" class="table table-bordered table-striped order-scroll order-list" style="width: 95%;"> <thead> <tr style="background-color: #680f79;color: #fff;"> <th class="text-center">Supplier Name</th> <th class="text-center">Supplier Code</th> <th class="text-center">Action</th> </tr> </thead> <tbody id="mytbody" style="text-align: center;"> </tbody> </table> </div> </div> </div> </div> </div> </div>