Скрыть элементы и отменить их, основываясь на выпадающем списке

Question

Скрыть элементы и отменить их, основываясь на выпадающем списке

0

Я видел примеры этого с помощью jquery или javascript, но я не испытываю ни одного из них вообще, поэтому все, что я пытаюсь, терпит неудачу. Мне нужно, чтобы все необходимые поля были скрыты и "не заданы", если это слово, если кто-то выбирает вариант "PayPal".

          <tr>
            <td colspan="2"><h4>Please enter payment method.</h4></td>
          </tr>
          <tr>
            <td class="required" colspan="2">
              <label>
                Card Type <span>*</span>
                <select name="CardType" id="CardType">
                  <option value="" selected="selected">--Please Select--</option>
                  <option value="Amex">American Express</option>
                  <!--<option value="Discover">Discover</option>-->
                  <option value="MasterCard">MasterCard</option>
                  <option value="PayPal">PayPal</option>
                  <option value="Visa">Visa</option>
                </select>
              </label>
            </td>
          </tr>
          <tr>
            <td class="required" width="50%">
              <label>
                Card Number <span>*</span> <br />
                <input type="text" name="CardNumber" id="CardNumber" class="text" maxlength="16" onkeypress="return isNumberKey(event)" />
                <em>&nbsp;</em>
              </label>
            </td>
            <td class="required" width="50%">
              <label>
                Security Code <span>*</span> <br />
                <input type="text" name="CardCode" id="CardCode" class="text" maxlength="5" onkeypress="return isNumberKey(event)" />
                <em><a href="javascript:void(0);" class="modalInput2" rel="#yesno">What this?</a></em>
              </label>
            </td>
          </tr>
          <tr>
            <td class="required">
              <label>
                Expiration Month <span>*</span>
                <select name="CardMonth" id="CardMonth">
                  <option value="" selected="selected">--Month--</option>
                  <option value="01">January - (01)</option>
                  <option value="02">February - (02)</option>
                  <option value="03">March - (03)</option>
                  <option value="04">April - (04)</option>
                  <option value="05">May - (05)</option>
                  <option value="06">June - (06)</option>
                  <option value="07">July - (07)</option>
                  <option value="08">August - (08)</option>
                  <option value="09">September - (09)</option>
                  <option value="10">October - (10)</option>
                  <option value="11">November - (11)</option>
                  <option value="12">December - (12)</option>
                </select>
              </label>
            </td>
            <td class="required">
              <label>
                Expiration Year <span>*</span>
                <select name="CardYear" id="CardYear">
                  <option value="" selected="selected">--Year--</option>
                  <?
                    $yToday = date("Y");
                    $yLimit = $yToday + 10;
                    for($y=$yToday; $y<$yLimit; $y++)
                        print "<option value='$y'>$y</option>\n";
                  ?>
                </select>
              </label>
            </td>
          </tr>

Я просмотрел следующие сообщения для руководства, но меня это просто сбивает с толку: показать скрытые элементы на основе ID из выпадающего javascript и jQuery показать/скрыть текстовое поле на основе значения выбора выпадающего списка и радиообмена

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

jlg 18 дек. 2013, в 19:28

Источник

Теги:

php

javascript

jquery

paypal

3 ответа

0

Извините, я едва понимаю, что вы говорите, единственное, что требуется, - это то, что вы требуете, не позволяя другим вещам происходить до тех пор, пока в них не будет ввода, что легко позаботится, изменив атрибуты, чтобы удалить "требуемые", в то же время вы скрываете другие вещи

 $("#CardType").change(function(){
    if ($("#CardType).value()=="PayPal"){
    $("fieldYouWantToHide).hide();
    }

 });

salty 18 дек. 2013, в 17:03

0

добавить событие $('#CardType').on('change',function() {});

и в этой функции получаются все входы и с функцией $.each() если значение select равно paypal removeAttr() 'required' для всех или просто hide() это или что угодно, что вы хотите.

mmmm 18 дек. 2013, в 16:46

Ещё вопросы

gibberish · Accepted Answer · 2013-12-18T16-56-00.000Z

Во-первых, вы можете неправильно использовать тег <label>. В моей демонстрации jsFiddle я хотел проверить каждый текст ярлыка, чтобы не скрывать ячейку "Тип карты". Однако метка окружает не только текст, но и сам элемент <select>. Это не то, как использовать тег метки. В обновленной демонстрационной версии я все равно не буду использовать ячейку "Тип карты", но вы увидите, что нужно использовать kludge (метод.split) для определения имени метки.

Затем я предлагаю сделать поля * обязательными, а не ячейками таблицы.

При проверке кода сложнее определить, требуется ли поле, если вы всегда должны смотреть на соответствующие атрибуты ячейки таблицы. Очень просто просто посмотреть на поле собственные атрибуты. Однако вот что-то, что решает ваш вопрос так:

jsFiddle Demo

$('#CardType').change(function() {
    if ($(this).val() == 'PayPal'){
        $('.required').each(function() {
            $(this).removeClass('required');
            $(this).hide();
        });
    }
});

Пересмотренный пример, показывающий скрытие всех ячеек, кроме ячейки Тип карты:

jsFiddle Demo 2

var lbl;
$('#CardType').change(function() {
    if ($(this).val() == 'PayPal'){
        $('.required').each(function() {
            lbl = $(this).find('label').text().split('*')[0];
            if (lbl != 'Card Type '){
                $(this).removeClass('required');
                $(this).hide();
            }
        });
    }
});

И еще один пример, демонстрирующий скрытие и восстановление required класса, когда выбор изменен на что-то еще. Обратите внимание, что необходимо добавить дополнительный класс ("req_poss") к каждому элементу <td> для которого класс REQuired может быть необходимо повторно добавить:

jsFiddle Demo 3

var lbl;
$('#CardType').change(function() {
    if ($(this).val() == 'PayPal'){
        $('.required').each(function() {
            lbl = $(this).find('label').text().split('*')[0];
            if (lbl != 'Card Type '){
                $(this).removeClass('required');
                $(this).hide();
            }
        });
    }else{
        $('.req_poss').each(function() {
            $(this).addClass('required').show();
        });
    }
});

Это демо jsfiddle очень полезно! Я буду использовать это чаще. Я полагаю, что иметь CardType в качестве того же обязательного класса, что и все остальное, не очень хорошая идея, поскольку он тоже скрыт. Я обновлю идентификатор для этого и возьму его оттуда. Спасибо!
Спасибо @ gibberish! Я бы в итоге попробовал что-то, что заняло бы у меня слишком много времени. Это здорово. :)