我想将输入字段中的条目添加到选择字段中,如果我插入重复的条目,它应该为已存在的值添加一个数字。
我的尝试仅适用于第一个条目,第二个条目会在选择字段中添加更多条目,同时它不区分大小写,您能帮我吗?
还准备好了一个jsfiddle:https://jsfiddle.net/hnxmv1jx/
$(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;
答案 0 :(得分: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>