Нужна помощь с настройкой Dropdown с тремя вариантами, пользователь выбирает один - скрытый div появляется с правильными полями

Question

Я разместил здесь вопрос и получил ответ в течение нескольких минут. Я надеюсь, что мастера здесь могут помочь мне снова.

Хорошо, поэтому я использую скрипт, который я нашел в Интернете, чтобы попытаться добавить этофункция для формы корзины покупок.

Вот настройки.

У меня есть выпадающий способ оплаты с Visa, Mastercard и Bank Withdrawal в качестве опции.

Для кредитных картУ меня есть один скрытый div с определенным набором полей, а для банка у меня есть еще один скрытый div.Каждый из div имеет названные идентификаторы - #payCredit и #payBank

У css для обоих есть поле: 0px и display: none;

Вот кусочек javascript, который я успешно использовал для флажка адреса доставки

`function toggleLayer( whichLayer )
{
  var elem, vis;
  if( document.getElementById ) // this is the way the standards work
    elem = document.getElementById( whichLayer );
  else if( document.all ) // this is the way old msie versions work
      elem = document.all[whichLayer];
  else if( document.layers ) // this is the way nn4 works
    elem = document.layers[whichLayer];
  vis = elem.style;
  // if the style.display value is blank we try to figure it out here
  if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
    vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
  vis.display = (vis.display==''||vis.display=='block')?'none':'block';
}`

Я надеялся, что смогу немного изменить его, чтобы удовлетворить свои потребности.

Вот выпадающий список

<label>Payment Method:</label>
    <select name="payment" id="payment" class="dropdown3" style="width:8em">
              <option selected="selected">Select</option>
       <option value="Visa" onclick="javascript:toggleLayer('payCredit');">Visa</option>
       <option value="MasterCard" onclick="javascript:toggleLayer('payCredit');">Mastercard</option>
       <option value="Direct" onclick="javascript:toggleLayer('payBank');">Direct Withdraw</option>
    </select></li>

Текущий результат заключается в том, что он вроде работает.

Я могу открыть раскрывающийся список и выбрать Visa, и он появляется, если я снова выбираю Visa, он исчезает, если я выбираю Visa, а затемвыберите банк, оба появятся.

Answer 1

Я бы порекомендовал решить другую проблему ... Когда пользователь вводит информацию о кредитной карте, я выполняю действие onkeypress, которое выполняет регулярное выражение для введенных данных, если первые четыре цифры соответствуют визе, тогда я автоматически выбираю вариант визы ... Кроме того, я бы использовал jquery для этого, что было бы намного проще.

Это закончится примерно так:

$('#credCardNumber').keypress(function(e) {
  if(/^4640/.test(this.value)) $('#cardType').val('Visa');
  if(/^6011/.test(this.value)) $('#cardType').val('Discover');
});

Предполагается, что у вашего выбора есть такая опция:

Visa

Вы могли бы сделать $ ('# credCardNumber'). Blur (...), если бы вы были довольны выбором типа карты, когда пользователь покидает поле номера кредитной карты.

Answer 2

Когда вы переключаете Visa или Mastercard, они оба переключают payCredit, поэтому они включают / выключают друг друга.Однако, когда вы переключаете payBank, он не отключает payCredit.

Вы можете запустить свой toggleLayer (whichLayer), очистив как payBank, так и payCredit, независимо от того, какой из них выбран, и не указав ни того, ни другого, а затем продолжить, чтобы определить, какой из них был выбран, и установить для этого отображения блокировку.