Showing/Hiding 具有 jQuery 的表格

Question

我有一个表单，我试图根据用户从下拉菜单中的选择来显示和隐藏不同的输入字段。 I have it working in that when an option is selected, it shows the desired form, but hides everything around the form as well.如果我将它设置为不隐藏任何内容而只显示，它会一个接一个地显示。

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

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 (,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 (,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 (,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();
})

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

Answer 1

经过一番环顾和试验后，我确实找到了一个解决方案，虽然我不认为它写得很好，但它确实有效。

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()
    }
});

Answer 2

尝试在应该 hide/show...

的每个 form 上添加 sub-form class

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

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

CodePen

Showing/Hiding 具有 jQuery 的表格

Showing/Hiding a form with jQuery

html

jquery

forms

hide

show