javascript - 如何在javascript中比较列表框值和表值？

Question

在我的场景中，只需选择列表框选项，值和文本将附加到表行，但我面临小问题，用户不允许选择相同的选项(已选择的选项)并且用户不允许附加相同的选项表中的值..如果用户选择相同的选项，则会显示警报消息，例如“您已被选中，请选择另一个选项”之类的..

这是我的示例代码 fiddle ..

Fiddle

这里是示例片段..

$("#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()... code> 您将同一事件两次附加到同一元素。

您可以创建一个包含所有已使用列表值的临时数组，并使用 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>