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

Posted 2023-03-07

【中文标题】在引导双重列表框内，在选择一个选项时，我只想将一个值与值属性内的所有其他值分开

【英文标题】：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

【发布时间】：2019-12-19 14:54:33

【问题描述】：

我有一个包含许多选项的引导列表框。每个选项都是医学测试，并具有价值属性。这个值属性有许多用逗号分隔的初始值，例如它有测试名称、测试代码和测试速率等。在双列表框的 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;
    );              

【参考方案1】：

在您的情况下，您可以通过将您的特定数据（测试率）放在 value2 属性中，而所有其他数据保留在 value 属性中，将特定数据（测试率）与值属性的所有其他数据分开/p>

<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 属性中使用所有其他数据