时间戳

首页 > 解决方案 > 动态计算多选选项数据值

javascript - 动态计算多选选项数据值

问题描述

在我的表格中，有 5 个国籍选择框，其中包含数据值。

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

第一个选项是静态的，并且始终以表单形式存在，其他 4 个选项仅在我们选择访问者数量时才会显示。

现在我想要的是，当我选择选项 1 时，它应该在 div totalcost 中显示数据费用值。当我们选择选项 2 时，它应该显示选项 1 + 选项 2 数据费用值，依此类推，与所有其他选择选项类似。当我们减少访客数量时，它应该降低成本。

我只是无法理解如何处理这个问题。

我可以像这样获得第一个选择选项的成本，但不知道如何动态处理，根据访问者数量显示和隐藏 div，然后选择选项并获取价格并在减少访问者数量时降低价格。

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

当我们在选项 1 中选择国家时，它应该在所有其他 4 个选择框中自动选择相同的选项。

标签： javascriptjquery

解决方案

像这样？

您可以将每个按类选择器用于动态然后检查 cssdisplay

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

推荐阅读