Как прочитать идентификаторы вкладок данных из выпадающего списка выбранной опции

Question

У меня есть раскрывающиеся идентификаторы вкладок данных в виде массива. когда я выбираю опцию, я хочу получить идентификаторы вкладки получения данных.

<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, чтобы получить один массив всех идентификаторов выбранных опций, вы можете использовать метод 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

Может быть, это все?

$("#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 3

Вы можете уменьшить выбранные параметры, отфильтровав невыбранные и сформировав список из 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 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>