Question

我希望显示通过第一个选择所选择的值，如果用户在第二个选择中选择了一个值，它将在第一个值之后。

我有多个选择我将用“ select”的值替换“ .search_person”类中的文本。

因此，如果您在第一个选择选项2中选择，我想与jquery一起显示2个成年人，如果您在第二个中也选择3个，则我想显示2个成年人，3个孩子。

但是，如果我更改select的值，我想删除旧值并显示新值。

例如：2名成人，1名冷人或1名成人，2名儿童

这是我的js，但这行不通...能帮我吗

jQuery(document).ready(function($) {

  $('body').bind('beforeunload', function() {
    $('select[name^="pax_1"]').val(0);
    $('select[name^="pax_2"]').val(0);
  });

  $(".show").hide();
  $(".input-search").click(function() {
    $(".show").toggle('fast', function() {
      if ($('.show').is(':visible')) {
        $("#icons").addClass("icon-chevron-up");
        $("#icons").removeClass("icon-chevron-down");
      } else {
        $("#icons").addClass("icon-chevron-down");
        $("#icons").removeClass("icon-chevron-up");
      }
    });
  });

  var array = [];
  $(document).on('change', 'select[name^="pax_1"]', function() {
    var optionSelected = $(this).find("option:selected");
    var valueSelected = optionSelected.val() + ' adults';
    array.splice($(this).parent().index(), 1);
    array.push(valueSelected);
  });
  $(document).on('change', 'select[name^="pax_2"]', function() {
    var optionSelected = $(this).find("option:selected");
    var valueSelected = optionSelected.val() + ' childrens';
    array.splice($(this).parent().index(), 1);
    array.push(valueSelected);
  });

  $(document).on('change', 'select', function() {
    var result = array.join(", ");
    $('.search_person').html(array);
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-search">
  <span class="search_person" title="please select">select number o</span>
  <span id="icons" class="icon-chevron-down"></span>
  <div id="occupants" class="occupants sqs">
    <div class="ast-form-group">
      <label class="ast-form-label multi-pax-label">adult</label>
      <select class="ast-form-control pax-combo" name="pax_1">
        <option value="0" selected="">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </div>
    <div class="ast-form-group">
      <label class="ast-form-label multi-pax-label">child</label>
      <select class="ast-form-control pax-combo" name="pax_2">
        <option value="0" selected="">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </div>
  </div>
</div>

Answer 1

您的功能太多：

$(function() {
  $(document).on('change', '.pax-combo', function() {
    var adults   = +$('[name="pax_1"]').val(); // convert to number
    var children = +$('[name="pax_2"]').val();
    var text = [];

    if (adults)   text.push(adults  +" adult"+(adults  ==1?"":"s"  )); // test > 0 and == 1
    if (children) text.push(children+" child"+(children==1?"":"ren"));

    $('.search_person').html(text.join(", "));
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-search">
  <span class="search_person" title="please select">select number o</span>
  <span id="icons" class="icon-chevron-down"></span>
  <div id="occupants" class="occupants sqs">
    <div class="ast-form-group">
      <label class="ast-form-label multi-pax-label">adult</label>
      <select class="ast-form-control pax-combo" name="pax_1">
        <option value="0" selected="">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </div>
    <div class="ast-form-group">
      <label class="ast-form-label multi-pax-label">child</label>
      <select class="ast-form-control pax-combo" name="pax_2">
        <option value="0" selected="">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </div>
  </div>
</div>

在HTML中使用jQuery显示多项选择的值

1 个答案: