JQuery Select / Option Box - связанные отношения - PullRequest
Новая
       5

JQuery Select / Option Box - связанные отношения

0 голосов
/ 10 ноября 2011

Возможно ли это в случае использования 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>

Ответы [ 3 ]

0 голосов
/ 10 ноября 2011

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

У вас также будут проблемы с различными правилами для каждой пары выбора.Если только вы не выберете опцию 3 в поле выбора «control», она всегда пропускает опции 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' в целивыберите поле.Вы можете легко добавить еще один атрибут «data», который позволит вам передать список параметров, которые следует сохранить и / или удалить.Вы можете сделать это по индексу опций, но это будет немного менее гибким и сложным для понимания.

0 голосов
/ 10 ноября 2011

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

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

По сути, это делает следующее

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

Будут ли связанные селекторы всегда находиться в соседних элементах 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.

...