Tengo siguiente código:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
</head>
<body>
<?php
$prueba = array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18);
for ($i = 1; $i <= 18; $i++):?>
<label>opcion <?php echo $i;?></label>
<select class="hola">
<option selected="selected" disabled="disabled">Selecciona uno</option>
<?php foreach($prueba as $elemento):?>
<option><?php echo $elemento?></option>
<?php endforeach?>
</select>
<br>
<br>
<?php endfor?>
<script>
$('.hola').change(function() {
var value = $(this).val();
$(this)
.siblings('select')
.children('option')
.each(function() {
if ( $(this).text() === value ) {
$(this).attr('disabled', true).siblings();
}
});
});
</script>
</body>
</html>
Hace пустая болтовня de lo que quiero, cuando marco una opción en un select
, la misma se anula en el resto de select
, porque никакой se puede repetir. El problema viene cuando cambio la opción de algún select
, porque necesito que esa opción se libere en el resto de select
сер para que pueda seleccionada de nuevo.
EDICIÓN:
Edito la pregunta y gracias @C.Rodriguez porque funciona perfectamente el código, pero танго el problema que cuando lo introduzco dentro de una tabla, надетые las файлы se generan подставляет el bucle for
ya никакой funciona, y никакой veo por qué.
Довод "против" Añado el código el select
dentro de la tabla:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<script src="js/jQuery341.js"></script>
</head>
<body>
<?php
$prueba = array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18);
?>
<table style="border:solid 2px #000000;">
<tr>
<th>Opcion</th>
</tr>
<?php for ($i = 1; $i <= 18; $i++):?>
<tr>
<td>
<select name="opcion<?php echo $i?>" class="hola" required="required">
<option selected="selected" disabled="disabled">Selecciona uno</option>
<?php foreach($prueba as $elemento):?>
<option><?php echo $elemento?></option>
<?php endforeach?>
</select>
</td>
</tr>
<?php endfor?>
</table>
<script>
$('.hola').change(function() {
// En caso de que la opción 'Selecciona uno' esté seleccionada, retornará 'undefined',
// De esta manera se evitará bloquear la opción 'Selecciona uno'.
var values = $("table.hola option:selected").toArray().map((option) => {
var value = $(option).val();
/*return value === "Selecciona uno" ? undefined : value;*/
return $(option).val();
});
$(this)
.siblings('select')
.children('option')
.attr("disabled", false);
$(this)
.siblings('select')
.children('option')
.each(function () {
// Busca si el valor del option actual coincide con algún valor en el array anterior
var disable = values.find(value => {
return $(this).text() === value;
});
// Deshabilita la opción si 'disable' es true
if (disable) {
$(this).attr('disabled', true).siblings();
}
});
});
</script>
</body>
</html>
EDICIÓN 2:
Довод "против" Añado el nuevo código el input type="text"
y el datalist
, por cierto, el código я da un error en esta línea, el редактор es dreamweaver:
var values = $('datalist option:selected').toArray().map((option) => {
Довод "против" El código el input
y el datalist
ханьцы y los cambios que me sugerido сын:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<script src="js/jQuery341.js"></script>
</head>
<body>
<?php
$prueba = array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18);
?>
<table style="border:solid 2px #000000;">
<tr>
<th>Opcion</th>
</tr>
<?php for ($i = 1; $i <= 18; $i++):?>
<tr>
<td>
<input type="text" list="lista" name="opcion<?php echo $i?>" class="hola" required="required" placeholder="Selecciona uno">
<datalist id="lista">
<?php foreach($prueba as $elemento):?>
<option><?php echo $elemento?></option>
<?php endforeach?>
</datalist>
</td>
</tr>
<?php endfor?>
</table>
<script>
$('.hola').change(function() {
// En caso de que la opción 'Selecciona uno' esté seleccionada, retornará 'undefined',
// De esta manera se evitará bloquear la opción 'Selecciona uno'.
var values = $('datalist option:selected').toArray().map((option) => {
var value = $(option).val();
/*return value === "Selecciona uno" ? undefined : value;*/
return $(option).val();
});
$('datalist')
.children('option')
.attr("disabled", false);
$('datalist')
.children('option')
.each(function () {
// Busca si el valor del option actual coincide con algún valor en el array anterior
var disable = values.find(value => {
return $(this).text() === value;
});
// Deshabilita la opción si 'disable' es true
if (disable) {
$(this).attr('disabled', true).siblings();
}
});
});
</script>
</body>
</html>
То, что estГЎ происходя состоит в том, что каждый раз, когда ты меняешь стоимость одного <select>
ты выводишь ее из строя opciГіn выбранная во всех <select>
, которые находят, однако, то, чем deberГ, - за которыми было нужно последовать, является:
disabled
из всех выборов <select>
). , Чтобы реализовывать упомянутое ранее, мы сфокусируемся в тебе script
Я ПЕРЕМЕЩАЮ 1: Получать всю стоимость отборных выборов (array стоимости).
// En caso de que la opción 'Selecciona uno' esté seleccionada, retornará 'undefined',
// De esta manera se evitará bloquear la opción 'Selecciona uno'.
var values = $(".hola option:selected").toArray().map((option) => {
var value = $(option).val();
return value === "Selecciona uno" ? undefined : value;
});
BГЎsicamente, состоит, во все выбирают <select>
, которые существуют, и получать Вашу отборную, назначенную по умолчанию стоимость, берется стоимость Selecciona uno
, однако, это подразумевает, что tambiГ©n deshabilitarГЎ, чтобы это предотвращать, используется один if
, что retornarГЎ undefined
если вышеупомянутая стоимость estГЎ отборный, противоположный случай retornarГЎ отборная стоимость.
, Если ты нуждаешься в том, что Selecciona uno
всегда estГ© выведенный из строя, тогда просто tendrГ-схвати, что удалять этот if
и оставлять value.
return $(option).val();
ПЕРЕМЕСТИЛ 2: Давать возможность ВСЕМ существующим выборам (это reiniciarГЎ признак disabled
из всех выборов <select>
).
$('select.hola').children('option').attr("disabled", false);
Таким образом, все выборы quedarГЎn данные возможность для despuГ©s выводить новую стоимость из строя.
ПЕРЕМЕСТИЛ 3: Искать во всех существующих выборах выборы, что уже estГЎn выбранные и выводить их из строя.
$('select.hola').children('option').each(function () {
// Busca si el valor del option actual coincide con algún valor en el array anterior
var disable = values.find(value => {
return $(this).text() === value;
});
// Deshabilita la opción si 'disable' es true
if (disable) {
$(this).attr('disabled', true).siblings();
}
});
В конце концов, выборы, которые совпадают quedarГЎn выведенные из строя.
EDIT:
Для того, чтобы оно функционировало (и чтобы предотвращать будущие недостатки, если ты нуждаешься в том, чтобы изменить и(или) добавить mГЎs cГіdigo HTML), что ты должен делать, состоит в том, чтобы изменять 'селекторы' для <select>
(так как ты изменил структуру). Меняться:
$(this).siblings('select').children('option').attr("disabled", false);
$(this).siblings('select').children('option').each(function () {...
Поэтому:
$('select.hola').children('option').attr("disabled", false);
$('select.hola').children('option').each(function () {...
(Уже actualicГ© cГіdigo).
EDIT 2:
С основанием в твоей новой структуре и согласно мнению, которое я высказал тебе, необходимо делать соответствующие изменения, ты cГіdigo javascript deberГ, - чтобы быть видным asГ-:
$('.hola').change(function () {
// Retorna un array con cada valor seleccionado en los 'input'
var values = $(".hola").toArray().map((input) => {
return $(input).val();
});
// Habilita todas las opciones del datalist (las que estaban deshabilitadas)
$('#lista').children('option').attr("disabled", false);
// Recorre todas las opciones del datalist
$('#lista').children('option').each(function () {
// Busca si el valor del option actual coincide con algún valor en el array anterior
var disable = values.find(value => {
return $(this).text() === value;
});
// Deshabilita la opción si 'disable' es true
if (disable) {
$(this).attr('disabled', true);
}
});
});
Я предлагаю тебе одна soluciГіn альтернативу, очень сходную с той, которая дала тебе @C.Rodriguez, проблема не состоит так в том, чтобы ты вывел выборы из строя во всех select
включая те, которые estГЎn в том, которого ты изменил, но ты должен вновь восстанавливать выборы, которые не estГ©n выбранные для того, чтобы они не пребывали выведенными из строя, я объясняю это тебе mГЎs основательно. Имея в виду следующего HTML
из примера:
<div class="contenedor">
<select>
<option value="">Selecciona</option>
<option value="option1">Opción 1</option>
<option value="option2">Opción 2</option>
<option value="option3">Opción 3</option>
<option value="option4">Opción 4</option>
<option value="option5">Opción 5</option>
</select>
<select>
<option value="">Selecciona</option>
<option value="option1">Opción 1</option>
<option value="option2">Opción 2</option>
<option value="option3">Opción 3</option>
<option value="option4">Opción 4</option>
<option value="option5">Opción 5</option>
<option value="option6">Opción 6</option>
</select>
<select>
<option value="">Selecciona</option>
<option value="option1">Opción 1</option>
<option value="option2">Opción 2</option>
<option value="option3">Opción 3</option>
<option value="option4">Opción 4</option>
<option value="option5">Opción 5</option>
</select>
</div>
И следующие переменные:
const $contenedor = $('.contenedor');
const $selects = $contenedor.find('select');
const $options = $contenedor.find('select option');
В Начало ее aplicaciГіn podrГ-схвати создавать объект со стоимостью Гєnicos, содержавшей во всех выборах select
, распределяя стоимость boolean
тем же самым:
const data = $options.toArray().reduce((obj, option) => (option.value && (obj[option.value] = obj[option.value] || option.selected), obj), {});
Это crearГ - в такой объект как следующий:
{
"option1": false,
"option2": false,
"option3": false,
"option4": false,
"option5": false,
"option6": false
}
MГЎs поздно podrГ-схвати иметь одну funciГіn, что reseteara вся стоимость внутри объекта и despuГ©s он пробегал false
все selects
, и принимая во внимание свойство value
из каждого, он обновлял стоимость, которая находится true
внутри объекта:
function updateData() {
Object.keys(data).forEach(value => data[value] = false);
$selects.each((index, el) => (el.value !== "" && (data[el.value] = true)));
};
И уже единственный tendrГ-эксперт, который должен называть эту funciГіn каждый раз, когда был изменен один select
и despuГ©s обновлять свойство disabled
каждый opciГіn имея в виду стоимость, которая у него есть внутри объекта. AquГ - я оставляю тебе snippet с функциональным примером:
const $contenedor = $('.contenedor');
const $selects = $contenedor.find('select');
const $options = $contenedor.find('select option');
const data = $options.toArray().reduce((obj, option) => (option.value && (obj[option.value] = obj[option.value] || option.selected), obj), {});
function updateData() {
Object.keys(data).forEach(value => data[value] = false);
$selects.each((index, el) => (el.value !== "" && (data[el.value] = true)));
};
$contenedor.on('change', 'select', () => {
updateData();
$options.each((index, el) => (el.value !== "" && !el.selected && (el.disabled = data[el.value]), true));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contenedor">
<select>
<option value="">Selecciona</option>
<option value="option1">Opción 1</option>
<option value="option2">Opción 2</option>
<option value="option3">Opción 3</option>
<option value="option4">Opción 4</option>
<option value="option5">Opción 5</option>
</select>
<select>
<option value="">Selecciona</option>
<option value="option1">Opción 1</option>
<option value="option2">Opción 2</option>
<option value="option3">Opción 3</option>
<option value="option4">Opción 4</option>
<option value="option5">Opción 5</option>
<option value="option6">Opción 6</option>
</select>
<select>
<option value="">Selecciona</option>
<option value="option1">Opción 1</option>
<option value="option2">Opción 2</option>
<option value="option3">Opción 3</option>
<option value="option4">Opción 4</option>
<option value="option5">Opción 5</option>
</select>
</div>
$('.hola option:selected')
и$('select.hola')
на$('datalist option:selected')
и$('datalist')
, соответственно. Таким же образом, tendrí эксперт, который должен проверять и анализировать, что твой có я говорю, что он продолжил быть оптимизированным. – C. Rodriguez 06.11.2019, 09:13