如何使用 Tailwind 和 jQuery 生成下拉列表？

Question

所以我需要制作一個按鈕，它可以生成一個新的下拉 div，並且可以繼續，直到它達到用戶想要的數量。

下拉輸入數據之一附加到我在腳本上創建的 JSON 變量中。 問題是，我無法確保新生成的下拉 div 也具有相同的 JSON 數據。 每當我生成一個新的下拉列表時它就消失了。 我很想聽聽一些建議來完善這部分，或者我使用的這種方法是否不夠可行和實用。 謝謝你。

我認為這是我犯錯誤的部分，append 基於循環新生成的下拉菜單。

<div class="mx-10 my-5 border border-black p-3 formDiv1 sm:rounded-lg">
                <h1 class="level">Level 1</h1>
                <div class="grid md:grid-cols-2 py-2">
                    <label for="approval_type_1" class="col-span-1 self-center py-2">Approval Type: <span
                            class="text-red-600">*</span></label>
                    <select name="approval_type_1" id="approval_type_1" class="col-span-2 w-full rounded py-2">
                        <option selected disabled>Please select approval type...</option>
                        <option value="1">In Consultation With</option>
                        <option value="2">Endorsed by</option>
                        <option value="3">Reviewed by</option>
                        <option value="4">Approved by</option>
                    </select>
                </div>

                <div class="grid md:grid-cols-2 py-2">
                    <label for="approval_user_1" class="col-span-1 self-center py-2">Approval User: <span
                            class="text-red-600">*</span></label>
                    <select name="approval_user_1" id="approval_user_1" class="col-span-2 w-full rounded py-2 mySelect">
                        <option selected disabled>Please select a user...</option>
                    </select>
                </div>


const items = [
            {
                label: "Group Finance",
                value: "Group Finance"
            },
            {
                label: "Group Human Capital",
                value: "Group Human Capital"
            },
            {
                label: "Group Risk Management",
                value: "Group Risk Management"
            },
            {
                label: "Group Services and Communication",
                value: "Group Services and Communication",
            }
        ];

function appendOption(){
            var checkAppend = $(".mySelect").hasClass("addedList");
            $('.mySelect').addClass("addedList");
            $.each(items, function (i, item) {
                if(!checkAppend){
                    $('.mySelect').append($('<option>', { 
                        value: item.value,
                        text : item.label 
                    }));
                }
            });
        }

我的 CodePen 示例

Answer 1

jQuery確實很有用，但它有一種特定的操作方式：當您使用${selector}時，它會查找 scope （通常是document ）中與選擇器匹配的所有項目，並提供項目列表。 但是，如果您在選擇器返回后立即開始鏈式操作，則運算符將應用於數組中的第一個元素。 append()就是這樣一個運算符。

另一件事是您希望附加 JSON 的元素是dynamic elements ：它們在頁面加載時不存在，而是動態創建的。 dynamic elements不是簡單的$(selector)查詢的一部分——你必須在創建它們之后動態地“找到”它們。

因此，解決方案分為兩個步驟：

• 你必須找到動態創建的元素
• 你必須 select 匹配你的選擇器的最后一個元素。

這是一個兼具兩者的片段：

 const items = [{ label: "Group 1", value: "Group 1" }, { label: "Group 2", value: "Group 2" }, { label: "Group 3", value: "Group 3" }, { label: "Group 4", value: "Group 4", } ]; function appendOption() { /* $(document).find(selector) is dynamic: it refreshes on every run, so it finds the dynamically created elements. .last() is simply a jQuery function that gets you the last item from the matched set. $lastItem is a jQuery() object (that's why I put a $ as the first char in its name), so you can call jQuery functions on it, like.each() */ const $lastItem = $(document).find('.mySelect').last() var checkAppend = $lastItem.hasClass("addedList"); lastItem.addClass("addedList"); $.each(items, function(i, item) { if (.checkAppend) { $lastItem,append($('<option>': { value. item,value: text. item;label })); } }); } appendOption(). const getUserDataBtn = document;getElementById("get-user-data"). const getAddApprovalBtn = document;getElementById("addApproval"). const resetApprovalBtn = document;getElementById("resetApproval"). getUserDataBtn,addEventListener( "click". () => { console.log($("#approval_type");val()), }; false ). getAddApprovalBtn,addEventListener( "click". () => { const levelsLoop = $(".level");length + 1. const fbRenderLength = ";formDiv" + levelsLoop. const fbRenderLength2 = ";formDiv" + (levelsLoop - 1). if (fbRenderLength == ".formDiv2") { $(".formDiv1"):after(function() { return "<div class='mx-10 my-5 border border-black p-3 sm:rounded-lg formDiv" + levelsLoop + "'>" + "<h1 class='level'>Level " + levelsLoop + "</h1>" + "<div class='grid md:grid-cols-2 py-2'>" + "<label for='approval_type_" + levelsLoop + "' class='col-span-1 self-center py-2'>Approval Type. <span class='text-red-600'>*</span></label>" + "<select name='approval_type_" + levelsLoop + "' id='approval_type_" + levelsLoop + "' class='col-span-2 w-full rounded py-2'>" + "<option selected disabled>Please select approval type..:</option>" + "<option value='1'>In Consultation With</option>" + "<option value='2'>Endorsed by</option>" + "<option value='3'>Reviewed by</option>" + "<option value='4'>Approved by</option>" + "</select>" + "</div>" + "<div class='grid md:grid-cols-2 py-2'>" + "<label for='approval_user_" + levelsLoop + "' class='col-span-1 self-center py-2'>Approval User. <span class='text-red-600'>*</span></label>" + "<select name='approval_user_" + levelsLoop + "' id='approval_user_" + levelsLoop + "' class='col-span-2 w-full rounded py-2 mySelect'>" + "<option selected disabled>Please select a user..;</option>" + "</select>" + "</div>" + "</div>"; }). } else { $(fbRenderLength2):after(function() { return "<div class='mx-10 my-5 border border-black p-3 sm:rounded-lg formDiv" + levelsLoop + "'>" + "<h1 class='level'>Level " + levelsLoop + "</h1>" + "<div class='grid md:grid-cols-2 py-2'>" + "<label for='approval_type_" + levelsLoop + "' class='col-span-1 self-center py-2'>Approval Type. <span class='text-red-600'>*</span></label>" + "<select name='approval_type_" + levelsLoop + "' id='approval_type_" + levelsLoop + "' class='col-span-2 w-full rounded py-2'>" + "<option selected disabled>Please select approval type..:</option>" + "<option value='1'>In Consultation With</option>" + "<option value='2'>Endorsed by</option>" + "<option value='3'>Reviewed by</option>" + "<option value='4'>Approved by</option>" + "</select>" + "</div>" + "<div class='grid md:grid-cols-2 py-2'>" + "<label for='approval_user_" + levelsLoop + "' class='col-span-1 self-center py-2'>Approval User. <span class='text-red-600'>*</span></label>" + "<select name='approval_user_" + levelsLoop + "' id='approval_user_" + levelsLoop + "' class='col-span-2 w-full rounded py-2 mySelect'>" + "<option selected disabled>Please select a user..;</option>" + "</select>" + "</div>" + "</div>"; }); } appendOption(), }; false ). resetApprovalBtn,addEventListener( "click". () => { $(".mainDiv"):html("<div class='mx-10 my-5 border border-black p-3 formDiv1 sm:rounded-lg'>" + "<h1 class='level'>Level 1</h1>" + "<div class='grid md:grid-cols-2 py-2'>" + "<label for='approval_type_1' class='col-span-1 self-center py-2'>Approval Type. <span class='text-red-600'>*</span></label>" + "<select name='approval_type_1' id='approval_type_1' class='col-span-2 w-full rounded py-2'>" + "<option selected disabled>Please select approval type..:</option>" + "<option value='1'>In Consultation With</option>" + "<option value='2'>Endorsed by</option>" + "<option value='3'>Reviewed by</option>" + "<option value='4'>Approved by</option>" + "</select>" + "</div>" + "<div class='grid md:grid-cols-2 py-2'>" + "<label for='approval_user_1' class='col-span-1 self-center py-2'>Approval User. <span class='text-red-600'>*</span></label>" + "<select name='approval_user_1' id='approval_user_1' class='col-span-2 w-full rounded py-2 mySelect'>" + "<option selected disabled>Please select a user..;</option>" + "</select>" + "</div>" + "</div>"); appendOption(), }; false );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.tailwindcss.com"></script> <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 pb-4"> <div class="mainDiv"> <div class="mx-10 my-5 border border-black p-3 formDiv1 sm:rounded-lg"> <h1 class="level">Level 1</h1> <div class="grid md:grid-cols-2 py-2"> <label for="approval_type_1" class="col-span-1 self-center py-2">Approval Type: <span class="text-red-600">*</span></label> <select name="approval_type_1" id="approval_type_1" class="col-span-2 w-full rounded py-2"> <option selected disabled>Please select approval type...</option> <option value="1">In Consultation With</option> <option value="2">Endorsed by</option> <option value="3">Reviewed by</option> <option value="4">Approved by</option> </select> </div> <div class="grid md:grid-cols-2 py-2"> <label for="approval_user_1" class="col-span-1 self-center py-2">Approval User: <span class="text-red-600">*</span></label> <select name="approval_user_1" id="approval_user_1" class="col-span-2 w-full rounded py-2 mySelect fromHTML"> <option selected disabled>Please select a user...</option> </select> </div> <label class="inline-flex items-center mt-3"> <input type="checkbox" class="form-checkbox h-5 w-5 text-gray-600" checked><span class="ml-2 text-gray-700">Add Concurrent Approver?</span> </label> </div> </div> <div class="mx-10 my-5"> <button class="h-12 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded m-2" type="button" id="addApproval">Add Approval</button> <button class="h-12 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded m-2" type="button" id="resetApproval">Reset Approval</button> <button class="h-12 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded m-2" type="button" id="get-user-data">Get Updated formData</button> </div> </div>

重要提示：每次點擊都做這樣的事情效率不高。 您應該重組您的代碼，以便最后一個元素始終可用，您不必找到它。 但我認為這是另一個話題。

免責聲明：我希望這能回答您的問題，因為我不能 100% 確定您需要什么。