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

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>

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

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>