jQuery Select Field计算重复条目

Question

我想将输入字段中的条目添加到选择字段中，如果我插入重复的条目，它应该为已存在的值添加一个数字。

我的尝试仅适用于第一个条目，第二个条目会在选择字段中添加更多条目，同时它不区分大小写，您能帮我吗？

还准备好了一个jsfiddle：https://jsfiddle.net/hnxmv1jx/

＆＃13;

＆＃13;

$(document).ready(function() {
  var $anzahl = 1;
  $("#OptionHinzufuegenButton").click(function(e) {
    e.preventDefault();

    function doppeleintragcheck() {

      $("#OptionListeFeld > option").each(function() {
        var s = $(this).text();
        var match = $(this).text() == $('#OptionHinzufuegenFeld').val();

        if (match) {
          $(this).text(this.text + '(' + $anzahl + ')');
          $anzahl++;
        } else if (s.indexOf($('#OptionHinzufuegenFeld').val()) >= 0) {
          var t = s.replace(/\((\d+)\)$/, (m, a) => '(' + (++a) + ')');
          $(this).text(t);
        } else {
          $('#OptionListeFeld').append($('<option>', {
            value: $anzahl,
            text: ($("#OptionHinzufuegenFeld").val())
          }));
        }
      });
    }

    if (!$('#OptionListeFeld > option').val()) {

      $('#OptionListeFeld').append($('<option>', {
        value: $anzahl,
        text: ($("#OptionHinzufuegenFeld").val())
      }));
    } else {
      doppeleintragcheck();
    }
  });

  $("#OptionLeerenButton").click(function(e) {
    e.preventDefault();
    $('#OptionListeFeld').empty();
    $anzahl = 1;
  });
});

＆＃13;

<fieldset>
  <form>
    <!-- Form Name -->
    <legend>Artikel</legend>
    <!-- OptionHinzufuegenFeld-->
    <div class="form-group">
      <label class="col-md-4 control-label" for="OptionHinzufuegenFeld">Option</label>
      <div class="col-md-4">
        <div class="input-group">
          <input id="OptionHinzufuegenFeld" name="OptionHinzufuegenFeld" type="text" placeholder="Option 1" value="Option 1" class="form-control input-md">
          <div class="input-group-addon"><i class="glyphicon glyphicon-list-alt"></i></div>
        </div>
      </div>
    </div>
    <!-- Speichern/Absenden -->
    <div class="form-group">
      <label class="col-md-4 control-label" for="SpeichernButton">Optionen</label>
      <div class="col-md-8">
        <button id="OptionHinzufuegenButton" name="OptionHinzufuegenButton" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span> add</button>
        <button id="OptionLeerenButton" name="OptionLeerenButton" class="btn btn-danger"><span class="glyphicon glyphicon-minus"></span> clear</button>
      </div>
    </div>
    <!-- Optionsliste-->
    <div class="form-group">
      <label class="col-md-4 control-label" for="OptionListeFeld">Optionsliste</label>
      <div class="col-md-4">
        <select multiple class="form-control" id="OptionListeFeld">
        </select>
      </div>
    </div>
  </form>
</fieldset>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

＆＃13;

＆＃13;

＆＃13;

Answer 1

当您有多个选项时，您的代码会再次添加它，因为您有选项循环$("#OptionListeFeld > option").each(function()。因此，如果你有option 1那么就这种情况而言，即使你已经在option 2中拥有select，它也会进入其他部分并添加该选项。当option 2到来时，它会增加价值，因此你会看到它两次。

为什么我添加return false。如果您添加option 1然后添加option 2，然后又添加option 1，则会再次添加同样的内容。

$(document).ready(function() {
  var $anzahl = 1;
  var existOpt = false;
  $("#OptionHinzufuegenButton").click(function(e) {
    e.preventDefault();

    function doppeleintragcheck() {

      $("#OptionListeFeld > option").each(function() {
        existOpt = false;
        var s = $(this).text();
        var match = $(this).text() == $('#OptionHinzufuegenFeld').val();

        if (match) {
          $(this).text(this.text + '(' + $anzahl + ')');
          $anzahl++;
          existOpt = true;//element found;
          return false; //get out of loop when element found
        } else if (s.indexOf($('#OptionHinzufuegenFeld').val()) >= 0) {
          var t = s.replace(/\((\d+)\)$/, (m, a) => '(' + (++a) + ')');
          $(this).text(t);
          existOpt = true;//element found;
          return false; //get out of loop when element found
        } 
      });
       if(!existOpt) {//add if element not found;
                    $('#OptionListeFeld').append($('<option>', {
                        value: $anzahl,
                        text: ($("#OptionHinzufuegenFeld").val())
                    }));
                }
    }

    if (!$('#OptionListeFeld > option').val()) {

      $('#OptionListeFeld').append($('<option>', {
        value: $anzahl,
        text: ($("#OptionHinzufuegenFeld").val())
      }));
    } else {
      doppeleintragcheck();
    }
  });

  $("#OptionLeerenButton").click(function(e) {
    e.preventDefault();
    $('#OptionListeFeld').empty();
    $anzahl = 1;
  });
});

<fieldset>
  <form>
    <!-- Form Name -->
    <legend>Artikel</legend>
    <!-- OptionHinzufuegenFeld-->
    <div class="form-group">
      <label class="col-md-4 control-label" for="OptionHinzufuegenFeld">Option</label>
      <div class="col-md-4">
        <div class="input-group">
          <input id="OptionHinzufuegenFeld" name="OptionHinzufuegenFeld" type="text" placeholder="Option 1" value="Option 1" class="form-control input-md">
          <div class="input-group-addon"><i class="glyphicon glyphicon-list-alt"></i></div>
        </div>
      </div>
    </div>
    <!-- Speichern/Absenden -->
    <div class="form-group">
      <label class="col-md-4 control-label" for="SpeichernButton">Optionen</label>
      <div class="col-md-8">
        <button id="OptionHinzufuegenButton" name="OptionHinzufuegenButton" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span> add</button>
        <button id="OptionLeerenButton" name="OptionLeerenButton" class="btn btn-danger"><span class="glyphicon glyphicon-minus"></span> clear</button>
      </div>
    </div>
    <!-- Optionsliste-->
    <div class="form-group">
      <label class="col-md-4 control-label" for="OptionListeFeld">Optionsliste</label>
      <div class="col-md-4">
        <select multiple class="form-control" id="OptionListeFeld">
        </select>
      </div>
    </div>
  </form>
</fieldset>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>