如何在特定情况下停止隐藏下拉内容？

Question

我用物化库制作了一个下拉列表。它包含项目列表。现在我想在所有项目的底部查看更多 link。 link 添加成功，但问题是当我单击 link dropdown/select 时关闭。

const select = document.querySelector("select");

const fillSelect = (newOptions) => {
   const options = select.querySelectorAll("option");
   options.forEach((x) => x.remove());
   newOptions.forEach((opt) => {
      
      const optionElement = document.createElement("option");
      optionElement.innerHTML = opt;
      select.appendChild(optionElement);
   });
   updateSelect();
};

const addViewMoreLink = () => {
  const link = document.createElement('div');
  link.innerHTML = 'View more';
  link.addEventListener('click', e => {
    e.preventDefault();
    e.stopPropagation();
    return false;
  })
  const dropdownContent = select.parentNode.querySelector(".dropdown-content");
  dropdownContent.appendChild(link);
}


const updateSelect = () => {
  window.M.FormSelect.init(select, {});
  
  
}

window.onload = function(){
  fillSelect(["Option 1", "Option 2", "Option 3"]);
  addViewMoreLink()
}

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<select id="organization-input">
</select>

我希望当我点击更多视图时它应该关闭 select/dropdown 内容并显示新选项。添加新选项不是问题。目前的问题是即使我使用了 stop e.stopPropagation();

它也会关闭

Answer 1

<style type="text/css">
  .classic-dropdown .dropdown-content.select-dropdown {
    pointer-events: none;
  }
  .classic-dropdown .dropdown-content.select-dropdown li {
    pointer-events: all;
  }
</style>

<div class="classic-dropdown">
  <select id="organization-input">
  </select>
</div>

<script type="text/javascript">
const select = document.querySelector("select");

const fillSelect = (newOptions) => {
    const options = select.querySelectorAll("option");
    options.forEach((x) => x.remove());
    newOptions.forEach((opt) => {

        const optionElement = document.createElement("option");
        optionElement.innerHTML = opt;
        select.appendChild(optionElement);
    });
    updateSelect();
};

const addViewMoreLink = (e) => {
    const link = document.createElement('div');
    link.innerHTML = 'View more';
    link.addEventListener('click', e => {
        e.preventDefault();
        e.stopPropagation();
        return false;
    })
    const dropdownContent = select.parentNode.querySelector(".dropdown-content");
    dropdownContent.appendChild(link);
}


const updateSelect = () => {
    window.M.FormSelect.init(select, {});
}

window.onload = function() {
    fillSelect(["Option 1", "Option 2", "Option 3"]);
    addViewMoreLink()
}

document.getElementsByClassName('dropdown-content')[0]
</script>

Answer 2

正如您提到的，您希望在单击“查看更多”和“显示新选项”时关闭下拉菜单。所以当你点击它时它会关闭是件好事。现在您需要做的就是添加新选项，然后在 dropdown-trigger 上触发点击事件，以便它再次打开并显示新选项。当您在外部单击时下拉菜单没有关闭的原因是正文高度等于它的内容高度（下拉容器），所以您实际上并没有点击正文。这就是为什么我在 css.

内的 body 上设置了 min-height

const select = document.querySelector("select");

const fillSelect = (newOptions) => {
   const options = select.querySelectorAll("option");
   // options.forEach((x) => x.remove());
   newOptions.forEach((opt) => {
      const optionElement = document.createElement("option");
      optionElement.innerHTML = opt;
      select.appendChild(optionElement);
   });
   updateSelect();
};

const addViewMoreLink = () => {
  const link = document.createElement('div');
  link.innerHTML = 'View more';
  link.addEventListener('click', e => {
    fillSelect(["Option 4", "Option 5", "Option 6"]);
    document.getElementsByClassName('dropdown-trigger')[0].click();
  });
  const dropdownContent = select.parentNode.querySelector(".dropdown-content");
  dropdownContent.appendChild(link);
}


const updateSelect = () => {
  const instances = window.M.FormSelect.init(select, {});
}

document.addEventListener('DOMContentLoaded', function() {
  fillSelect(["Option 1", "Option 2", "Option 3"]);
  addViewMoreLink();
});

body {
  min-height: 100vh;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<select id="organization-input"></select>

如何在特定情况下停止隐藏下拉内容？

How to stop the hiding of dropdown content in specific situation in materialize?

html

javascript

css

materialize