选择选项后如何隐藏/显示表单元素？

Question

我正在制作一个输入事件信息的表单。但是在这里，如果我们选择婚姻选项，那么应该会出现 2 个字段。如果我们选择会话，那么一个字段应该替换其他两个字段。

我写了下面的代码，执行时没有得到好的结果。

<form class="talk-to-us" method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
    <span class="<?php echo $errorType; ?>-msg"><?php echo $errorMsg; ?></span>
    <label class="fields">
        <div>Select event type:</div>
        <select id="ev-type" name="ev-type">
            <option value="session" selected>Session</option>
            <option value="marriage">Marriage</option>
            <option value="baby-shower">Baby Shower</option>
            <option value="other">Other</option>
        </select>
    </label>
    <label name="session" id="session" class="fields"><span><?php ?></span><input type="text" maxlength="40" placeholder="Event Name" name="event-name" required /></label>
    <label name="marriage" id="marriage" class="fields"><span><?php ?></span><input type="text" maxlength="40" placeholder="Groom's Name" name="groom-name" required /></label>
    <label name="marriage" id="marriage" class="fields"><span><?php ?></span><input type="text" maxlength="40" placeholder="Bride's Name" name="bride-name" required /></label>
    <label name="baby-shower" id="baby-shower" class="fields"><span><?php ?></span><input type="text" maxlength="40" placeholder="Mother's Name" name="mother-name" required /></label>
    <label class="fields"><span><?php ?></span><input type="date" placeholder="Event Start date (MM/DD/YYYY)" name="st-date" required /></label>
    <label class="fields"><span><?php ?></span><input type="date" placeholder="Event End Date (MM/DD/YYYY)" name="ed-date" /></label>
    <label class="fields"><span><?php ?></span><input type="time" placeholder="Event Start Time (24Hrs, IST Time)" name="st-time" required /></label>
    <label class="fields"><span><?php ?></span><input type="time" placeholder="Event End Time (24Hrs, IST Time)" name="ed-time" /></label>
    <label class="fields"><span><?php ?></span><input type="country" maxlength="20" placeholder="Event Country" name="event-country" required /></label>
    <label class="fields"><span><?php ?></span><textarea type="text" maxlength="1200" placeholder="Event description. Describe your event with sole heart!" name="event-descrip" required></textarea></label>
    <label class="non-field"><input type="submit" value="Host my Event" name="event-submit" /></label>
</form>
<script>
    $("#ev-type").on("change", function() {
        $("#" + $(this).val()).show().siblings().hide();
    })
</script>

我使用了这段代码，并希望这些字段会根据所选选项隐藏/显示。 所有这些字段都设置为display:none;。

请进一步帮助我。我检查了所有其他问题，但我无能为力。所以，这个问题永远不会重复。

提前致谢！

Answer 1

让我们以这种方式进行，

$("#ev-type").on("change", function() {
     $id = $(this).val();
    $id('#' + $id).attr('display','block');
});

正如你提到的，所有其他元素都设置为不显示，这将显示选定的块

Answer 2

在您将 id 指定为婚姻的字段中添加一个类。请提供唯一的 id 值，因为 id = 标识符。为多个字段提供相同的 id 可能会导致冲突。而相同的类名可以赋予多个字段。

         $('#ev-type').on('change', function() {
            var selectedType = this.value ;
             if(selectedType == 'marriage'){
                $('.marriage').hide(); 
                // write code to show the session fields
              }
              else if(selectedType == 'session'){
                $('.marriage').show();
                // write code to hide session fields
              }
          });

Answer 3

已为您更新了示例代码。希望这会有所帮助。

$("#ev-type").on("change", function() {
                switch($(this).val()) {
                  case 'marriage':
                    $(".fields").hide();
                    $("#ev-type-id, #groom-marriage, #bride-marriage").show();
                    break;
                   case 'session':
                   $(".fields").hide();
                    $("#ev-type-id, #session").show();
                   break;
                }
								})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="talk-to-us" method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<span class="<?php echo $errorType; ?>-msg"><?php echo $errorMsg; ?></span>
<label class="fields" id="ev-type-id">
  <div>Select event type:</div>
  <select id="ev-type" name="ev-type">
    <option value="session" selected>Session</option>
    <option value="marriage">Marriage</option>
    <option value="baby-shower">Baby Shower</option>
    <option value="other">Other</option>
  </select>
</label>
<label name="session" id="session" class="fields"><span><?php ?></span><input type="text" maxlength="40" placeholder="Event Name" name="event-name" required /></label>
<label name="marriage" id="groom-marriage" class="fields"><span><?php ?></span><input type="text" maxlength="40" placeholder="Groom's Name" name="groom-name" required /></label>
<label name="marriage" id="bride-marriage" class="fields"><span><?php ?></span><input type="text" maxlength="40" placeholder="Bride's Name" name="bride-name" required /></label>
<label name="baby-shower" id="baby-shower" class="fields"><span><?php ?></span><input type="text" maxlength="40" placeholder="Mother's Name" name="mother-name" required /></label>
<label class="fields"><span><?php ?></span><input type="date" placeholder="Event Start date (MM/DD/YYYY)" name="st-date" required /></label>
<label class="fields"><span><?php ?></span><input type="date" placeholder="Event End Date (MM/DD/YYYY)" name="ed-date" /></label>
<label class="fields"><span><?php ?></span><input type="time" placeholder="Event Start Time (24Hrs, IST Time)" name="st-time" required /></label>
<label class="fields"><span><?php ?></span><input type="time" placeholder="Event End Time (24Hrs, IST Time)" name="ed-time" /></label>
<label class="fields"><span><?php ?></span><input type="country" maxlength="20" placeholder="Event Country" name="event-country" required /></label>
<label class="fields"><span><?php ?></span><textarea type="text" maxlength="1200" placeholder="Event description. Describe your event with sole heart!" name="event-descrip" required></textarea></label>
<label class="non-field"><input type="submit" value="Host my Event" name="event-submit" /></label>
							</form>