如何使用 jquery 將下拉列表的選定選項的 ID 推送到數組中？

Question

嗨，我是 jquery 的新手，實際上我在 html 中有一個下拉菜單，我將在其中使用 ajax 從數據庫中獲取選項，但這里僅顯示選項數據庫中的選項

到目前為止我在 html 中所做的下拉代碼是

<div id="container" class=""></div>
<button id="seedoc" style="float: right; margin-right: 10px;" onclick="addOne();"></button>
function addOne() {
getEmails();
$('#container').append(
<div class='form-group' style='display:flex'>
<select class='drop form-control'  name='option' id='option'>
<option value='' disabled selected>Select your option</option>
</select>
                <button class="btn btn-primary shrBtn" style="float:left;" onclick="send()">Send</button>

</div>

我從 db.php 得到的 json 響應是

users:
[ "<p style='margin:0px;display:none;'data-id='755'>amilham</p>",
"<p style='margin:0px;display:none;'data-id='706'>a_sarabi</p>"]

and in dropdown I am getting amilham,a_sarabi so here in the dropdown if I select amilham I need to get the data-id ie 755 into an array and also in the another dropdown if I select a_sarabi I need to get 706 into array using jquery

誰能幫幫我

到目前為止，我嘗試過這樣但沒有得到

function send()
{
    var uids = [];
    \$('.drop').change(function(){
   \$(this).find('option:selected').each(function(){
       uids.push(\$(this).attr('data-id') );
    });
   });

我需要使用 jquery 添加的所有下拉列表中選定選項的所有 ID 將選項從 db 填充到下拉列表中

function getEmails(){
        
    
    \$.ajax({
        url :'propage.php',
        type : 'POST',
        dataType : 'json',
        data : '&userId='+\$('#hdn_userid').val()+'&action=getEmails',
        success : function(res){
            res.users.forEach(function(option) {
            \$('.drop').append('<option>' + option + '</option>');
        });
      },
    });
  }

Answer 1

我已經創建了您所說的演示示例（通過添加您的json響應數據表單 db.php） 。 您可以在單擊發送按鈕時存儲data-id 。

運行下面的代碼片段和 select 選項並單擊發送以查看數組uids將具有所選選項的data-id 。

 //Store in array() var uids = []; //Select option function $(document).on("change", ".drop", function() { //Find option selected var data = $(this).find("option:selected").attr('data-id') //Push selected data-id uids.push(data) //Enable button on selection $('#seedoc').prop('disabled', false) }) //Send function send() { console.log(uids) } //response var res = { "users": ["<p style='margin:0px;display:none;'data-id='755'>amilham</p>", "<p style='margin:0px;display:none;'data-id='706'>a_sarabi</p>" ] } function getEmails() { res.users.forEach(function(option) { $('.drop').append('<option data-id=' + $(option).attr('data-id') + '>' + option + '</option>'); }); } function addOne() { $('#container').append("<div class='form-group' style='display:flex'><select class='drop form-control' name='option' id='option'> <option value='' disabled selected>Select your option</option> </select>"); getEmails(); } getEmails();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container" class=""></div> <button id="seedoc" style="float: right; margin-right: 10px;" onclick="addOne();" disabled>Add one </button> <div class='form-group' style='display:flex'> <select class='drop form-control' name='option' id='option'> <option value='' disabled selected>Select your option</option> </select> <button class="btn btn-primary shrBtn" style="float:left;" onclick="send()">Send</button> </div>