Question

我有一个带onchange函数的select选项，只要我点击该选项，就可以更改其他输入中的值。

然而，它不能用于多个选择，只有在选择了许多选项时才显示第一个选择选项值。

HTML选择选项代码

<select class="form-control" onchange="selectFunction(event)" 
name="pay_course[]" required="" multiple>

  <option data-typeid="1111" value="courseId1">courseName1</option>
  <option data-typeid="2222" value="courseId2">courseName2</option>
</select>

输入显示总数

<input type="number" value="" id="money" class="form-control">

功能脚本

<script>
function selectFunction(e) {
  var type_id = $('select option:selected').attr('data-typeid'); //to get value
  document.getElementById("money").value =type_id;
}
</script>

Answer 1

如果选择了多个选项，我们需要循环浏览所有选定的选项，并使用data-typeid为每个选项获取map，如：

＆＃13;

function selectFunction(e) {
  var type_id = $('select option:selected').map(function() {
      return $(this).attr('data-typeid');
    })
    .get().map(parseFloat).reduce(function(a, b) {
      return a + b
    });
  console.log(type_id)
  $("#money").val( type_id );
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" onchange="selectFunction(event)" name="pay_course[]" required="" multiple>

  <option data-typeid="1000" value="courseId1">courseName1  </option>
  <option data-typeid="2000" value="courseId2">courseName2  </option>
  <option data-typeid="3000" value="courseId3">courseName3  </option>
  <option data-typeid="4000" value="courseId4">courseName4  </option>
</select>
<br/>
<br/>
<input type="number" value="" id="money" class="form-control">

＆＃13;

Answer 2

使用以下脚本：

   <script>
        function selectFunction(e) {
            var totalMoney = 0; 
            $('select option:selected').each(function(){
               totalMoney += parseInt($(this).attr('data-typeid'));
            });
            $("#money").val(totalMoney);
        }
   </script>

Answer 3

我认为你有几个选择。

首先：如果你可以改变

    <option data-typeid="1111" value="courseId1">courseName1</option>

是

    <option data-typeid="1111" value="1111">courseName1</option>

这样该值将为“1111”，而您可以简单地调用$（“select”）。val（），这将为您提供逗号分隔的所有选定项的值字符串。

第二：如果你确实需要的值与显示的文本相同，那么

    $("select option:selected").each(function() { 
      var type_id = $(this).attr('data-typeid');
      //your code here
    }

有了这个，你可以一次将一个值附加到另一个输入或者总结它们或其他什么。

Onchange multiple选择如何总结其他输入值中的总和

3 个答案: