Question

每当我选择一个选项时，我想重置a，b和c的所有值。问题是，当我选择1个房间并设置a，b，＆amp;的值时c当选择2室或3室时，1室a，b和＆amp; c当我再次选择1room时仍然存在。我想要看到的是，每当我选择房间时，我首先选择的房间应该重置为零。有什么帮助吗？

要明确我想：

Selected option: 1 Room
Values of inputs : a=1, b=2, c=3
2 Rooms and 3Rooms values : a, b & c are = ZERO

When I select 2 Rooms
Values of inputs : a=1, b=2, c=3
1 Room and 3 Rooms values : a, b & c are = ZERO

When I select 3 Rooms
Values of inputs : a=1, b=2, c=3
1 Room and 2 Rooms values : a, b & c are = ZERO

Live Code here

Answer 1

您可以按

重置所有选择元素

$('#' + $(this).val()).find('select option').attr('selected', false);

$(function() {
      $('#guest').change(function() {
        $('.rooms').hide();
        $('#' + $(this).val()).find('select option').attr('selected', false);
        $('#' + $(this).val()).show();
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<select class="form-control input-sm" id="guest">
  <option value="room1">1 Room</option>
  <option value="room2">2 Rooms</option>
  <option value="room3">3 Rooms</option>
</select>
<div class="rooms row-fluid col-md-12" id="room1">
  <!-- 1ROOM - -->
  <div class="row-fluid">
    <!-- ROOM 1 -->
    <div class="col-md-3">
      <p id="flight-label" class="col-xs-12">Room 1</p>
      <select class="form-control input-sm" id="form-tabs">
        <option value="zero">0 Adult</option>
        <option value="one">1 Adult</option>
        <option value="two">2 Adults</option>
        <option value="three">3 Adults</option>
        <option value="four">4 Adults</option>
        <option value="five">5 Adults</option>
        <option value="six">6 Adults</option>
        <option value="seven">7 Adults</option>
        <option value="eight">8 Adults</option>
        <option value="nine">9 Adults</option>
        <option value="ten">10 Adults</option>
      </select>
    </div>
    <div class="col-md-3">
      <select class="form-control input-sm" id="form-tabs">
        <option value="zero">0 Child</option>
        <option value="one">1 Child</option>
        <option value="two">2 Children</option>
        <option value="three">3 Children</option>
        <option value="four">4 Children</option>
        <option value="five">5 Children</option>
        <option value="six">6 Children</option>
        <option value="seven">7 Children</option>
        <option value="eight">8 Children</option>
        <option value="nine">9 Children</option>
      </select>
    </div>
    <div class="col-md-3">
      <select class="form-control input-sm" id="form-tabs">
        <option value="zero">0 Infant</option>
        <option value="one">1 Infant</option>
        <option value="two">2 Infants</option>
        <option value="three">3 Infants</option>
        <option value="four">4 Infants</option>
        <option value="five">5 Infants</option>
        <option value="six">6 Infants</option>
        <option value="seven">7 Infants</option>
        <option value="eight">8 Infants</option>
        <option value="nine">9 Infants</option>
      </select>
    </div>
  </div>
</div>
<div class="rooms row-fluid col-md-12" id="room2" style="display:none">
  <!-- 2ROOMS -->
  <div class="row-fluid">
    <!-- Room1 -->
    <div class="col-md-3">
      <p id="flight-label" class="col-xs-12">Room 1</p>
    </div>
    <div class="col-md-3">
      <select class="form-control input-sm" id="form-tabs">
        <option value="zero">0 Adult</option>
        <option value="one">1 Adult</option>
        <option value="two">2 Adults</option>
        <option value="three">3 Adults</option>
        <option value="four">4 Adults</option>
        <option value="five">5 Adults</option>
        <option value="six">6 Adults</option>
        <option value="seven">7 Adults</option>
        <option value="eight">8 Adults</option>
        <option value="nine">9 Adults</option>
        <option value="ten">10 Adults</option>
      </select>
    </div>
    <div class="col-md-3">
      <select class="form-control input-sm" id="form-tabs">
        <option value="zero">0 Child</option>
        <option value="one">1 Child</option>
        <option value="two">2 Children</option>
        <option value="three">3 Children</option>
        <option value="four">4 Children</option>
        <option value="five">5 Children</option>
        <option value="six">6 Children</option>
        <option value="seven">7 Children</option>
        <option value="eight">8 Children</option>
        <option value="nine">9 Children</option>
      </select>
    </div>
    <div class="col-md-3">
      <select class="form-control input-sm" id="form-tabs">
        <option value="zero">0 Infant</option>
        <option value="one">1 Infant</option>
        <option value="two">2 Infants</option>
        <option value="three">3 Infants</option>
        <option value="four">4 Infants</option>
        <option value="five">5 Infants</option>
        <option value="six">6 Infants</option>
        <option value="seven">7 Infants</option>
        <option value="eight">8 Infants</option>
        <option value="nine">9 Infants</option>
      </select>
    </div>
  </div>
  <div class="row-fluid">
    <!-- Room2 -->
    <div class="col-md-3">
      <p id="flight-label" class="col-xs-12">Room 2</p>
    </div>
    <div class="col-md-3">
      <select class="form-control input-sm" id="form-tabs">
        <option value="zero">0 Adult</option>
        <option value="one">1 Adult</option>
        <option value="two">2 Adults</option>
        <option value="three">3 Adults</option>
        <option value="four">4 Adults</option>
        <option value="five">5 Adults</option>
        <option value="six">6 Adults</option>
        <option value="seven">7 Adults</option>
        <option value="eight">8 Adults</option>
        <option value="nine">9 Adults</option>
        <option value="ten">10 Adults</option>
      </select>
    </div>
    <div class="col-md-3">
      <select class="form-control input-sm" id="form-tabs">
        <option value="zero">0 Child</option>
        <option value="one">1 Child</option>
        <option value="two">2 Children</option>
        <option value="three">3 Children</option>
        <option value="four">4 Children</option>
        <option value="five">5 Children</option>
        <option value="six">6 Children</option>
        <option value="seven">7 Children</option>
        <option value="eight">8 Children</option>
        <option value="nine">9 Children</option>
      </select>
    </div>
    <div class="col-md-3">
      <select class="form-control input-sm" id="form-tabs">
        <option value="zero">0 Infant</option>
        <option value="one">1 Infant</option>
        <option value="two">2 Infants</option>
        <option value="three">3 Infants</option>
        <option value="four">4 Infants</option>
        <option value="five">5 Infants</option>
        <option value="six">6 Infants</option>
        <option value="seven">7 Infants</option>
        <option value="eight">8 Infants</option>
        <option value="nine">9 Infants</option>
      </select>
    </div>
  </div>
</div>
<div class="rooms row-fluid col-md-12" id="room3" style="display:none">
  <!-- 3ROOMS -->
  <div class="row-fluid">
    <!-- Room1 -->
    <div class="col-md-3">
      <p id="flight-label" class="col-xs-12">Room 1</p>
    </div>
    <div class="col-md-3">
      <select class="form-control input-sm" id="form-tabs">
        <option value="zero">0 Adult</option>
        <option value="one">1 Adult</option>
        <option value="two">2 Adults</option>
        <option value="three">3 Adults</option>
        <option value="four">4 Adults</option>
        <option value="five">5 Adults</option>
        <option value="six">6 Adults</option>
        <option value="seven">7 Adults</option>
        <option value="eight">8 Adults</option>
        <option value="nine">9 Adults</option>
        <option value="ten">10 Adults</option>
      </select>
    </div>
    <div class="col-md-3">
      <select class="form-control input-sm" id="form-tabs">
        <option value="zero">0 Child</option>
        <option value="one">1 Child</option>
        <option value="two">2 Children</option>
        <option value="three">3 Children</option>
        <option value="four">4 Children</option>
        <option value="five">5 Children</option>
        <option value="six">6 Children</option>
        <option value="seven">7 Children</option>
        <option value="eight">8 Children</option>
        <option value="nine">9 Children</option>
      </select>
    </div>
    <div class="col-md-3">
      <select class="form-control input-sm" id="form-tabs">
        <option value="zero">0 Infant</option>
        <option value="one">1 Infant</option>
        <option value="two">2 Infants</option>
        <option value="three">3 Infants</option>
        <option value="four">4 Infants</option>
        <option value="five">5 Infants</option>
        <option value="six">6 Infants</option>
        <option value="seven">7 Infants</option>
        <option value="eight">8 Infants</option>
        <option value="nine">9 Infants</option>
      </select>
    </div>
  </div>
  <div class="row-fluid">
    <!-- Room2 -->
    <div class="col-md-3">
      <p id="flight-label" class="col-xs-12">Room 2</p>
    </div>
    <div class="col-md-3">
      <select class="form-control input-sm" id="form-tabs">
        <option value="zero">0 Adult</option>
        <option value="one">1 Adult</option>
        <option value="two">2 Adults</option>
        <option value="three">3 Adults</option>
        <option value="four">4 Adults</option>
        <option value="five">5 Adults</option>
        <option value="six">6 Adults</option>
        <option value="seven">7 Adults</option>
        <option value="eight">8 Adults</option>
        <option value="nine">9 Adults</option>
        <option value="ten">10 Adults</option>
      </select>
    </div>
    <div class="col-md-3">
      <select class="form-control input-sm" id="form-tabs">
        <option value="zero">0 Child</option>
        <option value="one">1 Child</option>
        <option value="two">2 Children</option>
        <option value="three">3 Children</option>
        <option value="four">4 Children</option>
        <option value="five">5 Children</option>
        <option value="six">6 Children</option>
        <option value="seven">7 Children</option>
        <option value="eight">8 Children</option>
        <option value="nine">9 Children</option>
      </select>
    </div>
    <div class="col-md-3">
      <select class="form-control input-sm" id="form-tabs">
        <option value="zero">0 Infant</option>
        <option value="one">1 Infant</option>
        <option value="two">2 Infants</option>
        <option value="three">3 Infants</option>
        <option value="four">4 Infants</option>
        <option value="five">5 Infants</option>
        <option value="six">6 Infants</option>
        <option value="seven">7 Infants</option>
        <option value="eight">8 Infants</option>
        <option value="nine">9 Infants</option>
      </select>
    </div>
  </div>
  <div class="row-fluid">
    <!-- 3rooms -->
    <div class="col-md-3">
      <p id="flight-label" class="col-xs-12">Room 3</p>
    </div>
    <div class="col-md-3">
      <select class="form-control input-sm" id="form-tabs">
        <option value="zero">0 Adult</option>
        <option value="one">1 Adult</option>
        <option value="two">2 Adults</option>
        <option value="three">3 Adults</option>
        <option value="four">4 Adults</option>
        <option value="five">5 Adults</option>
        <option value="six">6 Adults</option>
        <option value="seven">7 Adults</option>
        <option value="eight">8 Adults</option>
        <option value="nine">9 Adults</option>
        <option value="ten">10 Adults</option>
      </select>
    </div>
    <div class="col-md-3">
      <select class="form-control input-sm" id="form-tabs">
        <option value="zero">0 Child</option>
        <option value="one">1 Child</option>
        <option value="two">2 Children</option>
        <option value="three">3 Children</option>
        <option value="four">4 Children</option>
        <option value="five">5 Children</option>
        <option value="six">6 Children</option>
        <option value="seven">7 Children</option>
        <option value="eight">8 Children</option>
        <option value="nine">9 Children</option>
      </select>
    </div>
    <div class="col-md-3">
      <select class="form-control input-sm" id="form-tabs">
        <option value="zero">0 Infant</option>
        <option value="one">1 Infant</option>
        <option value="two">2 Infants</option>
        <option value="three">3 Infants</option>
        <option value="four">4 Infants</option>
        <option value="five">5 Infants</option>
        <option value="six">6 Infants</option>
        <option value="seven">7 Infants</option>
        <option value="eight">8 Infants</option>
        <option value="nine">9 Infants</option>
      </select>
    </div>
  </div>
</div>

但是你仍然可以减少号码。通过添加动态来构建HTML行。

^{注意：

由于您使用的是jQuery v1.4.2，我使用了.attr()，否则请使用.prop()}

每当我选择其他选项时，如何重置所选选项的内容值？

1 个答案: