Question

我已经看过使用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's 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>

我查看了以下帖子以获得指导，但它们让我感到困惑： Show hide elements based on ID from select dropdown javascript和 jQuery show/hide text field based on a dropdown selection value and a radiobutton

我所寻找的任何内容似乎都无法根据该选择删除必填字段。如果用户选择任何信用卡选项，我仍然需要它们，而不是PayPal。有人可以发布他们认为是这种情况的最佳课程的链接或我可以看到的一些示例代码吗？

Answer 1

首先，您可能错误地使用了<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(); } }); } });

还有一个示例演示取消隐藏并在select更改为其他内容时恢复required类。 请注意，有必要向每个<td>元素添加一个额外的类（“req_poss”），其中可能需要重新添加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(); }); } });

Answer 2

添加活动$('#CardType').on('change',function() {});

并在此函数中获取所有输入和函数$.each()如果select的值为paypal removeAttr()'required'为所有或仅hide()它或您想要的任何内容。

Answer 3

抱歉，我几乎没有按照你的意思去做，唯一需要做的就是你需要做的事情，不要让其他事情发生，直到有输入，这很容易通过改变要删除的属性来处理“需要”同时你隐藏其他东西

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

 });

隐藏元素并根据下拉选择不需要它们

3 个答案: