如何使用 jquery 将下拉菜单的选定选项的 ID 推送到数组中？

Question

实际上我在我的 html 中有一个下拉菜单，我将在这里使用 ajax 从数据库中获取选项我正在从数据库中检索 id 和选项，但只显示下拉菜单中的选项到目前为止我在 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>"]在下拉列表中，我得到 amilham,a_sarabi 所以在下拉列表中，如果我选择 amilham，我需要将数据 ID 即 755 放入数组中，如果我选择 a_sarabi，我还需要在另一个下拉列表中使用 jquery 将 706 放入数组中谁能帮帮我到目前为止我试过这样但没有得到function send(){    var uids = [];    \$('.drop').change(function(){   \$(this).find('option:selected').each(function(){       uids.push(\$(this).attr('data-id') );    });   });我需要使用 jquery 添加的所有下拉列表中所选选项的所有 ID 将数据库中的选项填充到下拉列表中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点击发送按钮。

运行下面的代码片段并选择选项并单击发送以查看数组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>