使用 jQuery 显示/隐藏表单答案

【问题标题】：Showing/Hiding a form with jQuery使用 jQuery 显示/隐藏表单
【发布时间】：2021-01-15 21:18:51
【问题描述】：

我有一个表单，我试图根据用户从下拉菜单中的选择来显示和隐藏不同的输入字段。我有它在选择一个选项时，它显示所需的表单，但也隐藏了表格周围的所有内容。如果我将其设置为不隐藏任何内容而只显示，它会一个接一个地显示。

我要做的是设置它，以便当用户进行选择时，它会显示相关表单而不隐藏任何额外内容，如果用户选择新表单，则会显示新表单并隐藏旧表单, 所有这些都没有隐藏从一开始就存在的预先存在的元素。

HTML

<section id="quote">
  <div id="quote_form" class="container border border-dark" style="border-radius:10px">

    <h2 class="text-center">Get a Quote!</h2>

    <form class="text-center">
      <div>
        <select class=" form-control-lg col-md-4 col-md-offset-4" id="building-type">
          <option selected disabled hidden>Please select building type</option>
          <option value="residential">Residential</option>
          <option value="commercial">Commercial</option>
          <option value="corporate">Corporate</option>
          <option value="hybrid">Hybrid</option>
        </select>
      </div>
      <br>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="tier_selection" id="standard" checked>
        <label class="form-check-label" for="standard">Standard ($7,565/shaft)</label>
      </div>

      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="tier_selection" id="premium">
        <label class="form-check-label" for="premium">Premium ($12,345/shaft)</label>
      </div>

      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="tier_selection" id="excelium">
        <label class="form-check-label" for="excelium">Excelium ($15,400/shaft)</label>
      </div>
    </form>

    <!--RESIDENTIAL INPUTS-->
    <form name="residential" id="residential" class="text-center" style="display:none">
      <h4 class="text-center">Please enter the following information:</h4>
      <div id="residential_input">
        <div id="number-of-apartments" class="form-group form-field residential">
          <label for="apartment_number">Number of apartments:</label>
          <input type="text" class="col-sm-2 col-md-offset-6" id="apartment_number">
        </div>

        <div id="number-of-floors" class="form-group form-field residential">
          <label for="floor_number">Number of floors:</label>
          <input type="text" class="col-sm-2 col-md-offset-6" id="floor_number">
        </div>

        <div id="number-of-basements" class="form-group form-field residential">
          <label for="basement_number">Number of basements:</label>
          <input type="text" class="col-sm-2 col-md-offset-6" id="basement_number">
        </div>
      </div>
    </form>
    <!--/RESIDENTIAL INPUTS-->

    <!--COMMERCIAL INPUTS-->
    <form name="commercial" id="commercial" class="text-center" style="display:none">
      <h4 class="text-center">Please enter the following information:</h4>
      <div id="commercial_input">
        <div id="number-of-companies" class="form-group form-field commercial">
          <label for="business_number">Number of distinct businesses:</label>
          <input type="text" class="col-sm-2 col-md-offset-6" id="business_number">
        </div>

        <div id="number-of-floors" class="form-group form-field commercial">
          <label for="floor_number">Number of floors:</label>
          <input type="text" class="col-sm-2 col-md-offset-6" id="floor_number">
        </div>

        <div id="number-of-basements" class="form-group form-field commercial">
          <label for="basement_number">Number of basements:</label>
          <input type="text" class="col-sm-2 col-md-offset-6" id="basement_number">
        </div>

        <div id="number-of-parking-spots" class="form-group form-field commercial">
          <label for="parking_spaces">Number of parking spaces:</label>
          <input type="text" class="col-sm-2 col-md-offset-6" id="parking_spaces">
        </div>

        <div id="number-of-elevators" class="form-group form-field commercial">
          <label for="elevator_cages">Number of elevator cages to be deployed:</label>
          <input type="text" class="col-sm-2 col-md-offset-6" id="elevator_cages">
        </div>
      </div>
    </form>
    <!--/COMMERCIAL INPUTS-->

    <!--CORPORATE INPUTS-->
    <form name="corporate" id="corporate" class="text-center" style="display:none">
      <h4 class="text-center">Please enter the following information:</h4>
      <div id="corporate_input">
        <div id="number-of-corporations" class="form-group form-field corporate">
          <label for="companies">Number of separate tenant companies:</label>
          <input type="text" class="col-sm-2 col-md-offset-6" id="companies">
        </div>

        <div id="number-of-floors" class="form-group form-field corporate">
          <label for="floor_number">Number of floors:</label>
          <input type="text" class="col-sm-2 col-md-offset-6" id="floor_number">
        </div>

        <div id="number-of-basements" class="form-group form-field corporate">
          <label for="basement_number">Number of basements:</label>
          <input type="text" class="col-sm-2 col-md-offset-6" id="basement_number">
        </div>

        <div id="number-of-parking-spots" class="form-group form-field corporate">
          <label for="parking_spaces">Number of parking spaces:</label>
          <input type="text" class="col-sm-2 col-md-offset-6" id="parking_spaces">
        </div>

        <div id="maximum-occupancy" class="form-group form-field corporate">
          <label for="people_floor">Maximum number of people per floor:</label>
          <input type="text" class="col-sm-2 col-md-offset-6" id="people_floor">
        </div>
      </div>
    </form>
    <!--/CORPORATE INPUTS-->

    <!--HYBRID INPUTS-->
    <form name="hybrid" id="hybrid" class="text-center" style="display:none">
      <h4 class="text-center">Please enter the following information:</h4>
      <div id="hybrid-input">
        <div id="number-of-companies" class="form-group form-field hybrid">
          <label for="business_number">Number of distinct businesses:</label>
          <input type="text" class="col-sm-2 col-md-offset-6" id="business_number">
        </div>

        <div id="number-of-floors" class="form-group form-field hybrid">
          <label for="floor_number">Number of floors:</label>
          <input type="text" class="col-sm-2 col-md-offset-6" id="floor_number">
        </div>

        <div id="number-of-basements" class="form-group form-field hybrid">
          <label for="basement_number">Number of basements:</label>
          <input type="text" class="col-sm-2 col-md-offset-6" id="basement_number">
        </div>

        <div id="number-of-parking-spots" class="form-group form-field hybrid">
          <label for="parking_spaces">Number of parking spaces:</label>
          <input type="text" class="col-sm-2 col-md-offset-6" id="parking_spaces">
        </div>

        <div id="maximum-occupancy" class="form-group form-field hybrid">
          <label for="people_floor">Maximum number of people per floor:</label>
          <input type="text" class="col-sm-2 col-md-offset-6" id="people_floor">
        </div>

        <div id="business-hours" class="form-group form-field hybrid">
          <label for="active_hours">Building active hours per day:</label>
          <select class="col-sm-2 col-md-offset-6" id="active_hours">
            <option selected id="0" value="0">0</option>
            <option id="1" value="1">1</option>
            <option id="2" value="2">2</option>
            <option id="3" value="3">3</option>
            <option id="4" value="4">4</option>
            <option id="5" value="5">5</option>
            <option id="6" value="6">6</option>
            <option id="7" value="7">7</option>
            <option id="8" value="8">8</option>
            <option id="9" value="9">9</option>
            <option id="10" value="10">10</option>
            <option id="11" value="11">11</option>
            <option id="12" value="12">12</option>
            <option id="13" value="13">13</option>
            <option id="14" value="14">14</option>
            <option id="15" value="15">15</option>
            <option id="16" value="16">16</option>
            <option id="17" value="17">17</option>
            <option id="18" value="18">18</option>
            <option id="19" value="19">19</option>
            <option id="20" value="20">20</option>
            <option id="21" value="21">21</option>
            <option id="22" value="22">22</option>
            <option id="23" value="23">23</option>
            <option id="24" value="24">24</option>
          </select>
        </div>
      </div>
    </form>
    <!--/HYBRID INPUTS-->

    <!--QUOTE OUTPUTS-->
    <div id="quote_output">
      <h2 class="text-center">Your instant quote:</h2>

      <form class="text-center">
        <div id="quote_output_fields">
          <div class="form-group">
            <label for="elevator_number">Number of elevators:</label>
            <input type="text" readonly class="col-sm-2 col-md-offset-6 plaintext" id="elevator_number">
          </div>

          <div class="form-group">
            <label for="quote_total">Installation Quote:</label>
            <input type="text" readonly class="col-sm-2 col-md-offset-6 plaintext" id="quote_total">
          </div>
        </div>

      </form>
    </div>
    <!--/QUOTE OUTPUTS-->
  </div>
</section>

隐藏除选择之外的所有内容的jQuery

$("#building-type").on("change", function() {
  $("#" + $(this).val()).show().siblings().hide();
})

只显示不隐藏的jQuery

$("#building-type").on("change", function() {
  $("#" + $(this).val()).show();
})

我认为会隐藏旧选择的jQuery，我只是不确定用什么代替“this”

$("#building-type").on("change", function() {
  $("#" + $(this).val()).show();
  $("#" + $(this).val()).hide();
})

感谢您的帮助，如果您需要任何其他信息，我会尽快提供。

【问题讨论】：

我已经用你的代码创建了 JSFiddle jsfiddle.net/euv5typz 尝试添加我错过的代码。这将有助于找到解决方案。
@VimalanJayaGanesh 我查看了您设置的内容，您输入的所有内容在我的代码中都表现得如何，但我不确定您还希望我添加什么。我不确定正确的解决方案，或者我对显示线条和隐藏线条的想法是否正确。如果是的话，我只是不知道用什么来代替“this”。
您在寻找这样的东西吗？ jsfiddle.net/qgzbpxve

标签： html jquery forms hide show

【解决方案1】：

尝试在每个 form 上添加一个 sub-form 类，该类应该隐藏/显示...

那么这个change select 上的处理程序应该可以工作了：

$("#building-type").on("change", function() {
  console.log("change",$(this).val())
  $(".sub-form").hide()
  $("#" + $(this).val()).show();
});

CodePen

【讨论】：

是的，这与我想出的代码完全相同，但它看起来好多了，而且代码少了很多。谢谢！

【解决方案2】：

在环顾四周并使用它之后，我确实找到了解决方案，虽然我不认为它写得像它可能的那样好，但它确实有效。

有效的jQuery

$('#building-type').on('change',function(){
    if( $(this).val()==="residential"){
    $("#residential").show()
    }
    else if( $(this).val()==="commercial"){
        $("#commercial").show()
    }
    else if( $(this).val()==="corporate"){
        $("#corporate").show()
    }
    else if( $(this).val()==="hybrid"){
        $("#hybrid").show()
    }
    else{
    $("#" + $(this)).hide()
    }
});

【讨论】：