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

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。有人可以发布他们认为是这种情况的最佳类(class)的链接或我可以查看的一些示例代码吗？

Answer 1

首先，您可能正在使用 <label>标记错误。在我的 jsFiddle 演示中，我想检查每个标签的文本，以免隐藏 Card Type 单元格。但是，标签不仅围绕着文本，还围绕着 <select>。元素本身。这不是 label 标签的使用方式。在更新的演示中，我仍然不会显示卡片类型单元格，但您会看到必须使用的组合(.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当 select 更改为其他内容时的类。 请注意，有必要向每个 <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();
        });
    }
});