I'm using the jQuery Repeater plugin.
I need to add a new item / line , remove the options already selected in the select or disable. Ex.:
Linha 1 - Opções: Valor X | Valor Y | Valor Z
Selected option: X value
Linha 2 - Opções: Valor Y | Valor Z
Remembering that line 2 (or other lines) only appear when I click on a " add new line " button.
To remove the options already selected you can use the code inside the show: function:
var $this = $(this);
var sels = $this.prevUntil("form.repeater").find("select option:selected");
sels.each(function(e,v){
$this.find("select option[value='"+v.value+"']").remove();
});
Note that .remove() will remove the previously selected options:
Example:
$(document).ready(function () {
$('form.repeater').repeater({
initEmpty: true,
defaultValues: {
'text-input': 'foo'
},
show: function () {
var $this = $(this);
$this.slideDown();
var sels = $this.prevUntil("form.repeater").find("select option:selected");
sels.each(function(e,v){
$this.find("select option[value='"+v.value+"']").remove();
});
},
hide: function (deleteElement) {
if(confirm('Are you sure you want to delete this element?')) {
$(this).slideUp(deleteElement);
}
},
})
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.js"></script>
<form class="repeater">
<div data-repeater-list="group-a">
<div data-repeater-item>
<input type="text" name="text-input" value="A"/>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<input data-repeater-delete type="button" value="Delete"/>
</div>
<div data-repeater-item>
<input type="text" name="text-input" value="B"/>
<input data-repeater-delete type="button" value="Delete"/>
</div>
</div>
<input data-repeater-create type="button" value="Add"/>
</form> You can use callback show to make a change before displaying the repeated element.
In this callback function we can use jquery.each to scroll through all the selects already filled, check the value and remove select which we just repeated.
show: function() {
/* Percorremos todos os selects visíveis */
$("form select:visible").each( (i, el) => {
/* Pegamos o valor do select e removemos do novo */
$(this).find('.sel option[value="${$(el).val()}"]').remove()
});
/* Exibimos o select modificado para o usuário */
$(this).slideDown();
}
Here's an example:
$(document).ready(function() {
$('.repeater').repeater({
repeaters: [{
selector: '.inner-repeater'
}],
show: function() {
$("form select:visible").each((i, el) => {
$(this).find('.sel option[value="${$(el).val()}"]').remove()
/* Bloqueia a alteração nos selects anteriores. (Opcional) */
$(el).prop("disabled", true)
});
/* Caso haja opções disponíveis, exibe para o usúario */
if ( $(this).find("option").length ) {
$(this).slideDown();
}
/* Caso contrário, bloqueia o botão "add" */
else {
$(this).parents("form").find("[data-repeater-create]").prop("disabled", true);
$(this).remove();
}
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script>
<!-- outer repeater -->
<form class="repeater">
<div data-repeater-list="outer-list">
<div data-repeater-item>
<!-- innner repeater -->
<div class="inner-repeater">
<div data-repeater-list="inner-list">
<div data-repeater-item>
<select class="sel">
<option value="1" selected>Valor 1</option>
<option value="2">Valor 2</option>
<option value="3">Valor 3</option>
</select>
<input data-repeater-delete type="button" value="Delete" />
</div>
</div>
</div>
</div>
</div>
<input data-repeater-create type="button" value="Add" />
</form>