javascript - 单击链接时将变量更改为发布方法

Question

我有一个定制的下拉菜单，我想将下拉菜单中的选定值添加到表单组中。

下拉菜单如下所示：

    .dropbtn {
        background-color: #1a2835;
        color: white;
        padding: 16px;
        font-size: 16px;
        border: none;
        cursor: pointer;
        border-style: solid;
        border-color: #ffffff;
        border-width: thin;
        width: 150px;
    }

    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    .dropdown-content a:hover {background-color: #f1f1f1}

    .dropdown:hover .dropdown-content {
        display: block;
    }

    .dropdown:hover .dropbtn {
        background-color: #1a2835;
    }

我这样使用：

 <div class="panel panel-default">
      <div class="panel-heading">Chose option</div>

          <div class="panel-body">
               <div class="dropdown" style="margin-bottom: 30px;">
                    <button class="dropbtn">Día</button>
                        <div class="dropdown-content">
                             <a href="#">Link 1</a>
                             <a href="#">Link 2</a>
                             <a href="#">Link 3</a>
                        </div>
                </div>
          </div>
     </div>

我的问题是，如何在单击表单组时添加所选内容，就像您在使用选择器时一样。

标签： javascripthtmlcss

Answer 1

您需要 JavaScript 来处理这样的动态内容。您将单击事件添加到下拉元素并将处理程序传递给基本上附加到表单的该事件。像这样（我没有包含你的 CSS，所以你的下拉菜单看起来不像下拉菜单）：

const dropdownElems = Array.from(document.querySelectorAll('.dropdown-content a'));
const formElem = document.getElementById('abc');
const dropdownElementClicked = function dropdownElementClicked(ev) {
  const elemToAdd = document.createElement('a');
  elemToAdd.innerHTML = ev.target.innerHTML;
  formElem.appendChild(
    elemToAdd
  );
};
dropdownElems.forEach( elem => elem.addEventListener('click', dropdownElementClicked) );

<div class="panel panel-default">
      <div class="panel-heading">Chose option</div>

          <div class="panel-body">
               <div class="dropdown" style="margin-bottom: 30px;">
                    <button class="dropbtn">Día</button>
                        <div class="dropdown-content">
                             <a href="#">Link 1</a>
                             <a href="#">Link 2</a>
                             <a href="#">Link 3</a>
                        </div>
                </div>
          </div>
</div>

<form id='abc'>
  
</form>