JavaScript点击按钮新增下拉列表错位、删除最新下拉列表问题咨询

问题原因说明 #

你设置display:block不生效的核心原因是用法错误：display属于CSS样式属性，不能通过setAttribute直接给元素添加该属性，需要修改元素的style属性下对应的样式值。另外你原有代码还存在逻辑错误：将新增、删除按钮的创建逻辑写在了option遍历的循环内，会导致每生成一个option就重复创建一次按钮。

修复后完整代码 #

case 'list_of_dropdowns':
    var sel = document.createElement('select');
    // 正确设置block样式，让select单独占一行
    sel.style.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;

    // 遍历生成option，按钮创建逻辑移出这个循环
    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_desc = option_id;
        }

        if ( option_id === attr_value ) 
        {
            option.setAttribute('selected', 'selected');
            option_selected = true;
        }
        option.innerHTML = option_desc;
        sel.appendChild(option);
    }

    // 新增按钮逻辑
    var add_btn = document.createElement("BUTTON");
    add_btn.innerHTML = "Add Item"; 
    add_btn.onclick = function () 
    {
        var new_sel = document.createElement('select');
        new_sel.style.display = "block";
        // 新下拉插入到按钮前面，排在所有已有下拉的下方
        col.insertBefore(new_sel, add_btn);
    };

    // 删除按钮逻辑
    var rem_btn = document.createElement("BUTTON");
    rem_btn.innerHTML = "Remove Item";       
    rem_btn.onclick = function () 
    {
        var all_selects = col.querySelectorAll('select');
        // 至少保留1个下拉，不能全部删完
        if(all_selects.length > 1){
            // 删除最后一个也就是最底部的下拉
            col.removeChild(all_selects[all_selects.length - 1]);
        }
    };

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

功能说明 #

• 点击Add Item按钮时，新生成的下拉会自动添加在已有下拉的下方，每个下拉单独占一行，两个按钮始终固定在最底部
• 点击Remove Item按钮时，会自动删除最底部的新增下拉，初始的第一个下拉不会被删除

内容的提问来源于stack exchange，提问作者usr18