在 bootstrap 双列表框中，在选择一个选项时，我只想将一个值与 value 属性内的所有其他值分开

Question

我有一个 bootstrap 列表框，其中包含许多选项。每个选项都是一项医学测试，并具有值属性。此值属性有许多初始值，用逗号分隔，例如它有测试名称、测试代码和测试率等。在双列表框的 onchange 函数中，我只想从值属性中存在的所有其他值中获取测试率.

注意：我不能将唯一的测试率放在值属性中，因为我还需要其他值。

Html我的双列表框代码

<div class="form-group row">
     <label class="col-sm-2 text-right col-form-label no-padding-top" for="Test">Test </label>
     <div class="col-sm-10">
          <select class="form-control" multiple="multiple" size="4" name="test_id" onchange="add_total()" id="duallist">
                  <% tests.forEach(test => { %>
                          <option value="<%- test.ID %> , <%- test.Code %> , <%- test.Name %> , <%- test.Type %> , <%- test.TemplateID%> , <%- test.Rate %>"><b><%- test.Code %></b> <%- test.Name %></option>
                                        <% }) %>
           </select>
       </div>
 </div>

双列表框的onchange函数如下。这里我只想得到测试率。

function add_total() {
    var sum = 0.0;
    $('#duallist option:selected').each(function() {
        //Want to get only Rate here not the whole value attribute how can I do that
        var total = parseInt($(this).attr('value'));
        sum = (sum + total);
        document.getElementById("subtotal").value = sum;
    });              
}

Answer 1

在您的情况下，您可以将特定数据（测试率）与值属性的所有其他数据分开，方法是将特定数据（测试率）放在 value2 属性中，而所有其他数据都保留在 value 属性为

<div class="form-group row">
     <label class="col-sm-2 text-right col-form-label no-padding-top" for="Test">Test </label>
     <div class="col-sm-10">
          <select class="form-control" multiple="multiple" size="4" name="test_id" onchange="add_total()" id="duallist">
                  <% tests.forEach(test => { %>
                          <option value="<%- test.ID %> , <%- test.Code %> , <%- test.Name %> , <%- test.Type %> , <%- test.TemplateID %>" value2="<%- test.Rate %>"><b><%- test.Code %></b> <%- test.Name %></option>
                  <% }) %>       
            </select>
      </div>
</div>

现在在双列表框的 onchange 函数中，您可以轻松访问您的特定数据（测试率），如

function add_total() {
      var sum = 0.0;
      $('#duallist option:selected').each(function() {
           var total = parseInt($(this).attr('value2'));
           sum = (sum + total);
           document.getElementById("subtotal").value = sum;
       });
}

您仍然可以根据需要在 value 属性中使用所有其他数据，因此

在 bootstrap 双列表框中，在选择一个选项时，我只想将一个值与 value 属性内的所有其他值分开

Inside bootstrap dual list box, on selection of an option I want to separate only one value from all other values inside of value attribute

html

javascript

ejs

node.js

bootstrap-duallistbox