如何使用 Tailwind 和 jQuery 生成下拉菜单？

Question

所以我需要制作一个按钮，它可以在其中生成一个新的下拉菜单 div 并且可以继续使用直到达到用户所需的数量。

其中一个下拉输入数据附加到我在脚本中创建的 JSON 变量。问题是，我无法确保新生成的下拉列表 div 也具有相同的 JSON 数据。每当我生成一个新的下拉菜单时它就消失了。我很想听听一些建议，让我对这部分进行打磨，或者我使用的这种方法是否不够可行和实用。谢谢。

我认为这是我犯错误的部分，基于循环新生成的下拉列表来追加。

<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 Example of Mine

Answer 1

jQuery 确实很有用，但它有一定的运作方式：当您使用 ${selector} 时，它会找到范围内（通常是 document）匹配的所有项目selector，并提供项目列表。 但是如果您在 select 或 returns 之后立即开始链式操作，则运算符将应用于 数组中的第一个元素。 append()就是这样的运算符。

另一件事是，您希望附加 JSON 的元素是 dynamic elements：它们在页面加载时并不存在，而是动态创建的。 dynamic elements 不是简单 $(selector) 查询的一部分 - 您必须在创建后动态地“找到”它们。

所以，解决方案分为两步：

你必须找到动态创建的元素
您必须 select last 元素匹配您的 selector.

这是一个兼顾两者的片段：

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% 确定您需要什么。

如何使用 Tailwind 和 jQuery 生成下拉菜单？

How can I generate a dropdown with Tailwind and jQuery?

javascript

html

jquery

dropdown

tailwind-css