在 javascript 函数中添加（一个在另一个下方）和删除下拉列表（select 元素）

Question

我有这个 javascript 代码。它是一组下拉列表和两个按钮（添加按钮和删除按钮）。

此图片为初始显示。

当我单击“添加项目”按钮时，我希望将新的下拉列表（“select”元素）添加到第一个下拉列表下方。目前，它正在添加到按钮的右侧。

代码：

case 'list_of_dropdowns':
          var sel = document.createElement('select');
          // ----------------------------------------------------
          //  1. SET ATTRIBUTE DISPLAY TO BLOCK
        // ----------------------------------------------------
          sel.setAttribute("display", "block");
          sel.setAttribute('id', attr_html_id);
          sel.setAttribute('onfocus', 'annotation_editor_on_metadata_focus(this)');
          sel.setAttribute('onchange', 'annotation_editor_on_metadata_update(this)');
          var option_id;
          var option_selected = false;
          for ( option_id in _via_attributes[_via_metadata_being_updated][attr_id].options ) 
          {
        var option_html_id = attr_html_id + '__' + option_id;
        var option = document.createElement('option');
        option.setAttribute('value', option_id);

        var option_desc  = _via_attributes[_via_metadata_being_updated][attr_id].options[option_id];
        if ( option_desc === '' || typeof(option_desc) === 'undefined' ) 
        {
          // option description is optional, use option_id when description is not present
          option_desc = option_id;
        }

        if ( option_id === attr_value ) 
        {
          option.setAttribute('selected', 'selected');
          option_selected = true;
        }
        option.innerHTML = option_desc;
        sel.appendChild(option);
        // ----------------------------------------------------
        //  CODE FOR "ADD ITEM" ELEMENT
        // ----------------------------------------------------

        var add_btn = document.createElement("BUTTON");   // Create a <button> element
        add_btn.innerHTML = "Add Item"; 
        add_btn.onclick = function () 
        {
            //alert("Add Button is clicked");
            var sel = document.createElement('select');
            sel.setAttribute("display", "block");
            col.appendChild(sel);
        };
        // ----------------------------------------------------
        //  CODE FOR "REMOVE ITEM" ELEMENT
        // ----------------------------------------------------
        var rem_btn = document.createElement("BUTTON");   // Create a <button> element
        rem_btn.innerHTML = "Remove Item";       
        rem_btn.onclick = function () 
        {
            alert("Remove Button is clicked");
        };
        
             }

         if ( ! option_selected ) 
         {
        sel.selectedIndex = '-1';
         }
            col.appendChild(sel);
           col.appendChild(add_btn);
           col.appendChild(rem_btn);
            break;

我尝试添加代码

sel.setAttribute("display", "block");

(a) under 1. SET ATTRIBUTE DISPLAY TO BLOCK

(b) 也在里面

add_btn.onclick=函数(){}

但是，那没有用。

目标：

我想做这两件事：

单击“添加项目”按钮后，新的下拉列表应添加到第一个下拉列表下方。
单击“删除项目”按钮时，应删除最后一个下拉列表（位于底部的列表或最近添加的列表）。

Answer 1

我添加了元素 - select 项和两个按钮到 div 元素。为了让 select 元素出现在下方，我将样式设置为 'block'.

selectList.style.display = 'block';

为了删除 select 项，我添加了这一行：

div.lastChild?.remove();

在 RemoveSelect() 中

我把它放在 if 条件中，这样 div 中的前三个项目（第一个 select 项目和两个按钮）就不会被删除。

var div = document.createElement("list");
            
        var sel = document.createElement('select');
            setOptions(sel);
        div.appendChild(sel);
        var add_btn = document.createElement("BUTTON"); 
        add_btn.innerHTML = "Add Item"; 
       add_btn.addEventListener("click", AddSelect);
           div.appendChild(add_btn);

        var rem_btn = document.createElement("BUTTON");
        rem_btn.innerHTML = "Remove Item"; 
        rem_btn.addEventListener("click", RemoveSelect);
        div.appendChild(rem_btn);

       col.appendChild(div);
        

       function AddSelect() 
       {
              
              var selectList = document.createElement('select');
              selectList.id = 'mySelect';
              selectList.style.display = 'block';
              setOptions(selectList);

              div.appendChild(selectList);
       }

       function RemoveSelect() 
           {
         
        var x = div.childElementCount;
        if(x>3)
            {
         
             div.lastChild?.remove();
        }
       }

在 javascript 函数中添加（一个在另一个下方）和删除下拉列表（select 元素）

Add (one below the other) and remove drop down lists (select element) inside javascript function

javascript

html

drop-down-menu

styles

目标：