CODEWITHSUNDEEP
javascriptjquery
Gaurav Singh
Gaurav Singh

Reputation: 57

dynamically calculation of multiple select option data value

in my form there is 5 nationality selection box with data-value in it.

<select id="visitorcount" name="visitorcount">
    <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 id="person1">
    <select id="country1" name="visitor1">
        <option value="india" data-fee="20">India</option>
        <option value="usa" data-fee="25">USA</option>
    </select>
</div>
<div id="person2" style="display:none">
    <select id="country2" name="visitor2">
        <option value="india" data-fee="20">India</option>
        <option value="usa" data-fee="25">USA</option>
    </select>
</div>
<div id="person3" style="display:none">
    <select id="country3" name="visitor3" style="display:none">
        <option value="india" data-fee="20">India</option>
        <option value="usa" data-fee="25">USA</option>
    </select>
</div>
<div id="person4" style="display:none">
    <select id="country4" name="visitor4" style="display:none">
        <option value="india" data-fee="20">India</option>
        <option value="usa" data-fee="25">USA</option>
    </select>
</div>
<div id="person5" style="display:none">
    <select id="country5" name="visitor5" style="display:none">
        <option value="india" data-fee="20">India</option>
        <option value="usa" data-fee="25">USA</option>
    </select>
</div>
<div id="totalcost"></div>

first option is static and always present in form and other 4 select will be shown only when we select number of visitors.

Now what i want is, when i select option 1 it should show the data-fee value in div totalcost. when we select option two then it should show option1 + Option 2 data-fee value, and so on similar with all other select option. and when we reduce the number of visitor, it should reduce the cost.

i am just not able to understand how to deal with this.

i can get cost of first select option like this but do not how to deal with dynamically, showing and hiding the div according to number of visitor and then select the options and get the prices and reduce the prices when reduce number of visitor.

<script>
    $('body').on('change', '#country1', function() {
        var priceforcountry = $('option:selected', this).data('fee');
        $('#totalcost').text(priceforcountry);
        //alert(priceforcountry);
    });
</script>

and when we select country in option 1 it should auto select the same option in all other 4 select boxes.

Upvotes: 0

Views: 243

Answers (1)

I&#39;m Limit
I&#39;m Limit

Reputation: 899

Like this?

You can use each by class selector for dynamic then check css display

$('body').on('change', '#visitorcount', function() {
  for (var i = 1; i <= 5; i++) {
    if (i <= $('#visitorcount').val()) {
      $('#person' + i).show();
      $('#country' + i).show();
    } else {
      $('#person' + i).hide();
      $('#country' + i).hide();
    }
  }
});
$('body').on('change', '.ct,#visitorcount', function() {
  var priceforcountry = 0;
  $('.ct').each(function(index,element){
    if($(element).parent().css("display") != "none"){
      priceforcountry += +$('option:selected', this).data('fee');
    }
  });
  $('#totalcost').text(priceforcountry);
  //alert(priceforcountry);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="visitorcount" name="visitorcount">
  <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 id="person1">
  <select id="country1" name="visitor1" class="ct">
    <option value="india" data-fee="20">India</option>
    <option value="usa" data-fee="25">USA</option>
  </select>
</div>
<div id="person2" style="display:none" >
  <select id="country2" name="visitor2" class="ct">
    <option value="india" data-fee="20">India</option>
    <option value="usa" data-fee="25">USA</option>
  </select>
</div>
<div id="person3" style="display:none">
  <select id="country3" name="visitor3" style="display:none" class="ct">
    <option value="india" data-fee="20">India</option>
    <option value="usa" data-fee="25">USA</option>
  </select>
</div>
<div id="person4" style="display:none">
  <select id="country4" name="visitor4" style="display:none" class="ct">
    <option value="india" data-fee="20">India</option>
    <option value="usa" data-fee="25">USA</option>
  </select>
</div>

<div id="person5" style="display:none">
  <select id="country5" name="visitor5" style="display:none" class="ct">
    <option value="india" data-fee="20">India</option>
    <option value="usa" data-fee="25">USA</option>
  </select>
</div>

<div id="totalcost"></div>

Upvotes: 1

Related Questions