Вопросы Теги

Опция Liberar de ООН выбирает cuando cambia

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>
0
задан 06.11.2019, 21:37
2 ответа

То, что estГЎ происходя состоит в том, что каждый раз, когда ты меняешь стоимость одного <select> ты выводишь ее из строя opciГіn выбранная во всех <select>, которые находят, однако, то, чем deberГ, - за которыми было нужно последовать, является:

  • Получать всю стоимость отборных выборов (array стоимости).
  • Давать возможность ВСЕМ существующим выборам (это reiniciarГЎ признак disabled из всех выборов <select>).
  • Искать во всех существующих выборах выборы, что уже estГЎn выбранные и выводить их из строя.

, Чтобы реализовывать упомянутое ранее, мы сфокусируемся в тебе 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);
        }
    });
});
0
ответ дан 01.12.2019, 14:41
  • 1
    Muchí пропасти спасибо, функционируй верно así как эта, но если я помещаю ' select' в таблице уже оно не функционирует, и я не понимаю потому что. Я издаю вопрос с có я говорю внутри таблицы, чтобы видеть, можешь ли ты бросать мне руку, потому что я не понимаю, потому что оно не функционирует. Большое спасибо. – Perti 05.11.2019, 20:56
  • 2
    Проверь EDIT в ответе – C. Rodriguez 06.11.2019, 05:25
  • 3
    Ты машина, большое спасибо. Только у меня остается последнее сомнение, что, если ты мог решать ее мне. Если вместо того, чтобы состоять с select снаружи с неударом в лунку type=text в том, что он присоединяет datalist, чтобы выбирать?? selecciona один это у меня есть как placeholder. Снова muchí пропасти спасибо. – Perti 06.11.2019, 09:00
  • 4
    В этом случае, dependerá có mo esté s реализовывая, но в хорошей teorí в só tendrí эксперт, который должен менять $('.hola option:selected') и $('select.hola') на $('datalist option:selected') и $('datalist'), соответственно. Таким же образом, tendrí эксперт, который должен проверять и анализировать, что твой có я говорю, что он продолжил быть оптимизированным. – C. Rodriguez 06.11.2019, 09:13
  • 5
    Хорошие C.Rodrí guez, оно я не функционирует, я издаю вопрос añ adiendo как serí в có я говорю, что ты посмотрим видишь проблему. Mucas спасибо снова. – Perti 06.11.2019, 09:58

Я предлагаю тебе одна 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>
0
ответ дан 01.12.2019, 14:41