взаимосвязь, связанная с jquery select / полем опций

ProgramBox

взаимосвязь, связанная с jquery select / полем опций

Post author:admin
Запись опубликована:30 апреля, 2023
Post category:Вопросы по программированию

#jquery #select #option

#jquery #html-выберите

Вопрос:

Возможно ли в этом случае использовать JavaScript или jQuery ?

Когда значение поля выбора с классом cl_preAction установлено в значение ‘003’ «Конец света», параметры в поле выбора «cl_prePRRS» 01,02,03 должны быть удалены или выделены серым цветом (выбрать невозможно — если это возможно).)

Обратите внимание, что этот шаблон будет повторяться несколько раз на странице, поэтому использование одного и того же идентификатора не сработает.

 $('.cl_preAction').live('change', function (){  
     if ($(this).val() =='003'){
     $(this).parent().parent()...
});



<tr>
    <td>Action</td>
    <td class='none'>
       <div data-role='fieldcontain' class='none'>
        <select name='ACTC' class='none cl_preAction'   data-theme='a'>
            <option data-location='S' value='001'>Fire</option>
            <option data-location='T' value='002'>Flood</option>
            <option data-location='T' value='003'>End Of World</option>
        </select>
       </div>
    </td>
</tr>
<tr>
    <td>Reason</td>
    <td class='none'>
        <div data-role='fieldcontain' class='none'>
            <select name='PRRS' class='none cl_prePRRS'   data-theme='a'>
                <option value='01'>Rebuild</option>
                <option value='02'>Relocate</option>
                <option value='03'>Cash Payment</option>
                <option value='04'>Send registered letter indicating this event is not covered</option>
                    </select>
        </div>
    </td>
</tr>

1. здесь следует отметить одну вещь, если вы планируете использовать $ (this) несколько раз в одной и той же области, чтобы она ссылалась на один и тот же объект, было бы лучше назначить $ (this) локальной переменной. var me = $(this); а затем вместо этого используйте ‘me’.

Ответ №1:

Ваша первая проблема будет заключаться в том, что отключение параметров выбора не работает надежно во всех браузерах и версиях. Лучше всего удалить ненужные параметры, но вы также можете создать что-то, что заставляет пользователя выбирать другой вариант, когда это необходимо.

У вас также возникнет проблема с различными правилами для каждого из сочетаний полей выбора. Если только при выборе опции 3 в поле выбора «контроль» не будут всегда пропущены параметры 1,2,3 целевого поля выбора.

Я бы использовал атрибут ‘data’…

     <select name='ACTC' class='none cl_preAction' data-theme='a' data-target-select="cl_prePRRS">

    $('.cl_preAction').live('change', function (){  
        var me = $(this);
        if (me.val() =='003') {
            $("." me.attr("data-target-select")).filter(function() {
                return ($(this).val() != '03');  // I think you really want 04 here.
            }).remove();
        }
   });

Не идите по пути, пытаясь перепрыгнуть через DOM, если вам действительно не нужно. Это запутанно, и, не дай бог, вам когда-либо понадобится переместить поле выбора или изменить структуру страницы.

Вы заметите, что это решение удалит только те параметры, которые не = ’03’ в целевом поле выбора. Вы могли бы легко добавить еще один атрибут «данные», который позволит вам передать список опций, которые следует сохранить и / или удалить. Вы могли бы сделать это с помощью индекса опций, но это было бы немного менее гибко и сложнее для понимания.

Ответ №2:

Всегда ли связанные селекторы будут находиться в смежных элементах tr? Это не самый элегантный способ сделать это, поскольку он сильно зависит от вашей структуры (если вы добавите элемент tr между элементами, содержащими два селектора, это приведет к сбою)

 $('.cl_preAction').live('change', function (){  
    if ($(this).val() =='003') {
        $(this).closest('tr').next('tr').find('.cl_prePRRS option').filter(function() {
            return (parseInt($(this).val(), 10) <= 3);
        }).remove();
    }
});

Это приведет к удалению опций из DOM.

1. Мне нравится, что вы добавили отказ от ответственности к своему ответу, указав, что при изменении HTML это может вызвать проблемы.

2. Я не могу добавить комментарий к вашему ответу, поэтому я напишу его здесь — это хороший метод, но я думаю, что у него может быть несколько списков выбора с одним и тем же классом (я полагаю, он имеет в виду, что точно такой же фрагмент будет повторяться, поэтому он не может использовать идентификаторы?) Однако ему придется прояснить это самому. Если это так, метод данных не будет работать.

Ответ №3:

Я почти уверен, что отключение параметров будет работать только в IE 8 и выше. Тем не менее, есть несколько интересных вещей, которые вы можете попробовать, чтобы преодолеть это в более старых версиях.

Тем не менее, вот пример, который отвечает на вопрос так, как вы его задали 😉

По сути, он выполняет следующее

ищет следующий tr тег
находит select элемент в этом узле
объявляет, disabled="disabled" если End of World выбрано
если End of World не выбрано, используется removeAttr() для повторного включения значений