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

Question

I Have Drop down Data tab ids as an array. when i select option I want to get retrieve data tab ids.

<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

Since you have multiple option on select to get one array of all selected option ids you can use map method on selected options.

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

You can reduce the selected options by filtering out the non-selected and building a list of data-tab_ids values.

 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

Maybe that's it?

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

It's my solve:

 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>