如何使用 JQuery/AJAX 檢索容器中存在的所有下拉列表的選定值？

Question

使用 Javascript，我在 dvContainer 下動態生成下拉列表。 我想獲取該容器下所有 select 元素的選定值。 以下是從 javascript 生成的 HTML 代碼：

<div id="dvContainer">
   <div>
      <select id="QType_id2">
         <option value="1">MCQs</option>
         <option value="2">Short Questions</option>
         <option value="3">Long Questions</option>
      </select>
      <input type="button" value="Remove">
   </div>
   <div>
      <select id="QType_id">
         <option value="1">MCQs</option>
         <option value="2">Short Questions</option>
         <option value="3">Long Questions</option>
      </select>
      <input type="button" value="Remove">
   </div>
   <div>
      <select id="QType_id">
         <option value="1">MCQs</option>
         <option value="2">Short Questions</option>
         <option value="3">Long Questions</option>
      </select>
      <input type="button" value="Remove">
   </div>
</div>

此 Java 腳本用於在 dvContainer 中添加下拉菜單：

<script type="text/javascript">
        function AddDropDownList() {

            //Build an array containing Customer records.
            var customers;

            $.getJSON(href="URL GOES HERE",function(customers){
            

            //Create a DropDownList element.
            var ddlCustomers = $("<select />");
            ddlCustomers.attr('id',"QType_id")
            //Add the Options to the DropDownList.
            $(customers).each(function () {
               var option = $("<option />");

                //Set Customer type in Text part.
                option.html(this.type);

                //Set id in Value part.
                option.val(this.id);

                //Add the Option element to DropDownList.
                ddlCustomers.append(option);
            });

            //Reference the container DIV.
            var dvContainer = $("#dvContainer")

            //Add the DropDownList to DIV.
            var div = $("<div />");
            div.append(ddlCustomers);

            //Create a Remove Button.
            var btnRemove = $("<input type = 'button' value = 'Remove' />");
            btnRemove.click(function () {
                $(this).parent().remove();
            });

            //Add the Remove Buttton to DIV.
            div.append(btnRemove);

            //Add the DIV to the container DIV.
            dvContainer.append(div);
        });
        };
        
    </script>

使用 AJAX/jQuery，我想構建一個 function，它提供所有下拉列表的選定值。

Answer 1

只是為了說明，添加具有相同 id 的多個元素並不是一個好習慣。 建議將ddlCustomers.attr('id',"QType_id")替換為ddlCustomers.attr('name',"QType_id") 。 下面添加了用於獲取所有行數據的代碼片段。

 function getAllRowsData() { var alldata = $('#dvContainer>div').map(function() { var $this = $(this), data = {}; data['QType_id'] = $this.find('[name="QType_id"]').val(); return data; }).toArray(); $("#alldataop").text(JSON.stringify(alldata)); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="dvContainer"> <div> <select name="QType_id"> <option value="1">MCQs</option> <option value="2">Short Questions</option> <option value="3">Long Questions</option> </select> <input type="button" value="Remove"> </div> <div> <select name="QType_id"> <option value="1">MCQs</option> <option value="2">Short Questions</option> <option value="3">Long Questions</option> </select> <input type="button" value="Remove"> </div> <div> <select name="QType_id"> <option value="1">MCQs</option> <option value="2">Short Questions</option> <option value="3">Long Questions</option> </select> <input type="button" value="Remove"> </div> </div> <input type="button" onclick="getAllRowsData()" value="Get Data"> <div id="alldataop"></div>