Show values of multiple selects with jquery in html

Question

I want the value selected in via the first select to be displayed, and if the user chooses a value in the second select, it will be after the first value.

I have multiple selects with value I will replace the text in class ".search_person" by the value of select.

So if you select in the first select option 2, I want to show with jquery 2 adults, if you also choose 3 in the second, I want to show 2 adults,3 children.

But if I change value of select, I want to remove old value and show the new.

Ex: 2adults,1chill or 1adult,2childrens

THis is my js but this don't work... Can you help me please

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>

mplungjan · Accepted Answer · 2019-03-20 13:26:17Z

You have too many functions:

$(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>

Collectives™ on Stack Overflow

Show values of multiple selects with jquery in html

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related