Question

我具有下拉数据标签ID作为数组。当我选择选项时，我想获取检索数据标签ID。

<select name="users[]" id="users" class="form-control " multiple="multiple">
    <option data-tab_ids="[1,2,3,4,5,6,7,8]" value="0">Admin</option>
    <option data-tab_ids="[9]" value="1">samjad</option>
    <option data-tab_ids="[2]" value="2">Mohamed Omar</option>
</select>

Answer 1

由于select上有多个选项来获取所有所选选项ID的一个数组，因此可以对所选选项使用map方法。

$("select").on('change', function() {
  const ids = $(this).find('option:selected').map(function() {
    return $(this).data('tab_ids')
  }).get();

  console.log(ids)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="users[]" id="users" class="form-control " multiple="multiple">
  <option data-tab_ids="[1,2,3,4,5,6,7,8]" value="0">Admin</option>
  <option data-tab_ids="[9]" value="1">samjad</option>
  <option data-tab_ids="[2]" value="2">Mohamed Omar</option>
</select>

Answer 2

您可以通过过滤掉未选中的选项并建立data-tab_ids值的列表来减少选中的选项。

document.getElementById('users').addEventListener('change', function(e) {
  // Retrieved a list of all selected tab lists.
  let selected = Array.from(e.target.querySelectorAll('option')).reduce((res, opt) => {
    return opt.selected ? res.concat(opt.getAttribute('data-tab_ids')) : res;
  }, []);
  console.log('Selected tab lists:', JSON.stringify(selected));
  
  // Return an array view of a set of all selected tab IDs.
  let tabIds = [...new Set(selected.reduce((r, t) => r.concat(JSON.parse(t)), []))].sort();
  console.log('Selected tab ids:', JSON.stringify(tabIds));
});

<select name="users[]" id="users" class="form-control " multiple="multiple">
    <option data-tab_ids="[1,2,3,4,5,6,7,8]" value="0">Admin</option>
    <option data-tab_ids="[9]" value="1">samjad</option>
    <option data-tab_ids="[2]" value="2">Mohamed Omar</option>
</select>

Answer 3

也许就是这样吗？

$("#users").on('change', function(){
  array = $(this).find('option:selected').attr('data-tab_ids');
  console.log(array);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<select name="users[]" id="users" class="form-control " multiple="multiple">
    <option data-tab_ids="[1,2,3,4,5,6,7,8]" value="0">Admin</option>
    <option data-tab_ids="[9]" value="1">samjad</option>
    <option data-tab_ids="[2]" value="2">Mohamed Omar</option>
</select>

Answer 4

这是我的解决方法：

const display = document.querySelector(".display");
const selectInput = document.querySelector(".form-control");
const setValue = () => {
display.textContent =selectInput[selectInput.value].textContent + " " + selectInput[selectInput.value].getAttribute("data-tab_ids")
}
selectInput.addEventListener("click", setValue, false);

<select name="users[]" id="users" class="form-control" multiple="multiple">
    <option data-tab_ids="[1,2,3,4,5,6,7,8]" value="0">Admin</option>
    <option data-tab_ids="[9]" value="1">samjad</option>
    <option data-tab_ids="[2]" value="2">Mohamed Omar</option>
</select>
<div class="display">
</div>

如何从所选选项的下拉列表中读取“数据”选项卡ID

4 个答案: