如何使用 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 = [];&nbsp; &nbsp;//Select option function$(document).on("change", ".drop", function() {&nbsp; //Find option selected&nbsp; var data = $(this).find("option:selected").attr('data-id')&nbsp; //Push selected data-id&nbsp; uids.push(data)&nbsp; //Enable button on selection&nbsp; $('#seedoc').prop('disabled', false)})//Sendfunction send() {&nbsp; console.log(uids)}//responsevar res = {&nbsp; "users": ["<p style='margin:0px;display:none;'data-id='755'>amilham</p>",&nbsp; &nbsp; "<p style='margin:0px;display:none;'data-id='706'>a_sarabi</p>"&nbsp; ]}function getEmails() {&nbsp; res.users.forEach(function(option) {&nbsp; &nbsp; $('.drop').append('<option data-id=' + $(option).attr('data-id') + '>' + option + '</option>');&nbsp; });}function addOne() {&nbsp; $('#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>");&nbsp; 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'>&nbsp; <select class='drop form-control' name='option' id='option'>&nbsp; &nbsp; <option value='' disabled selected>Select your option</option>&nbsp; </select>&nbsp; <button class="btn btn-primary shrBtn" style="float:left;" onclick="send()">Send</button></div>