如何在Bootstrap SelectPicker中获取数据ID？

Question

我是JS的初学者。 我有Bootstrap selectpicker。 我有以下代码：

<select class="form-control selectpicker select_subcription" name="subscription">
  <optgroup label="Przedłuż wybrane profile o:">
    <option class="selectValueFromPriceList" value="1" data-id="1.00">Przedłużam wybrane profile o 7 dni za 1.00 zł / konto</option>
    <option class="selectValueFromPriceList" value="3" data-id="2.00">Przedłużam wybrane profile o 30 dni za 2.00 zł / konto</option>
    <option class="selectValueFromPriceList" value="5" data-id="4.00">Przedłużam wybrane profile o 90 dni za 4.00 zł / konto</option>
  </optgroup>
  <optgroup label="Promuj wybrane ogłoszenia:">
    <option class="selectValueFromPriceList" value="6" data-id="11.00">Wypromuj na liście ogłoszeń przez 7 dni za 11.00 zł / konto</option>
    <option class="selectValueFromPriceList" value="8" data-id="22.00">Wypromuj na liście ogłoszeń przez 30 dni za 22.00 zł / konto</option>
    <option class="selectValueFromPriceList" value="9" data-id="33.00">Wypromuj na liście ogłoszeń przez 60 dni za 33.00 zł / konto</option>
    <option class="selectValueFromPriceList" value="10" data-id="44.00">Wypromuj na liście ogłoszeń przez 90 dni za 44.00 zł / konto</option>
  </optgroup>
</select>

$('.select_subcription').selectpicker({
  noneSelectedText: 'Wybierz płatności z listy'
});

$('.select_subcription').on('changed.bs.select', function(e) {
  //alert(e.target.value);
  var summary = 0;
  var countCheckedCheckboxes = $checkboxes.filter(':checked').length;
  var price = e.target.value; // here i need data-id
  alert(price);
  summary = countCheckedCheckboxes * price;
  $('#count-checked-checkboxes').text(summary);
});

我需要：

var price = e.target.value;

未选择数据ID选项-非值。

我该如何更改？ 我要变化

var price = e.target.value; 

对于

var price = e.target.data-id

可是我不知道

Answer 1

您可以使用以下内容

var price = $(".select_subcription option:selected").attr('data-id');

Answer 2

首先， e.target将与select而不是所option ，因此即使调用获取数据成功，它也不会返回任何内容。 您需要首先获取选定的选项。

从那里，您可以使用jQuery的data()方法获取值或本机dataset属性，如下所示：

$('.select_subcription').on('changed.bs.select', function(e) {
  var summary = 0;
  var countCheckedCheckboxes = $checkboxes.filter(':checked').length;
  var price = $(this).find('option:selected').data('id');
  console.log(price);

  summary = countCheckedCheckboxes * price;
  $('#count-checked-checkboxes').text(summary);
});

Answer 3

 $( ".select_subcription" ).change(function(e) { //other code snippet console.log(e.target.value); console.log($(".select_subcription option:selected").attr('data-id')); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select class="form-control selectpicker select_subcription" name="subscription"> <optgroup label="Przedłuż wybrane profile o:"> <option class="selectValueFromPriceList" value="1" data-id="1.00">Przedłużam wybrane profile o 7 dni za 1.00 zł / konto </option> <option class="selectValueFromPriceList" value="3" data-id="2.00">Przedłużam wybrane profile o 30 dni za 2.00 zł / konto </option> <option class="selectValueFromPriceList" value="5" data-id="4.00">Przedłużam wybrane profile o 90 dni za 4.00 zł / konto </option> </optgroup> <optgroup label="Promuj wybrane ogłoszenia:"> <option class="selectValueFromPriceList" value="6" data-id="11.00">Wypromuj na liście ogłoszeń przez 7 dni za 11.00 zł / konto </option> <option class="selectValueFromPriceList" value="8" data-id="22.00">Wypromuj na liście ogłoszeń przez 30 dni za 22.00 zł / konto </option> <option class="selectValueFromPriceList" value="9" data-id="33.00">Wypromuj na liście ogłoszeń przez 60 dni za 33.00 zł / konto </option> <option class="selectValueFromPriceList" value="10" data-id="44.00">Wypromuj na liście ogłoszeń przez 90 dni za 44.00 zł / konto </option> </optgroup> </select>