Question

我们有一个弹出窗口，其中包含带有很多会在加载时内部没有

更新：我尝试过：

$('#select1').dropdown('refresh')

，语义UI菜单没有未更新。

更新2 在某些情况下，通过仅将它们的显示更改为“无”而不是实际上将它们从“ <选择>”中删除，来“添加”或“删除”了这些<选项>。在其他情况下，它们实际上是添加或删除的。语义UI可以处理这两种情况吗？

Answer 1

我决定继续前进，并创建了概念验证，以查看是否有解决此问题的方法。我创建了一个mutationobserver，以查找弹出窗口中每个属性的更改，并使语义ui“菜单”与关联的display属性匹配。它似乎正在工作。

function create_select_mo()
{
    //create observer
        var observer = new MutationObserver(function(mutations){
            //console.log(mutations)

            //get changed element in select
                var target_el = mutations[0].target

            if(!gel(target_el.parentNode))
            {
                return false
            }


            //find the changed <select>
                var sel = target_el.parentNode

            //make sure the parent is a <select>
                if(sel.nodeName != 'SELECT')
                {
                    return false
                }

            //get <select> wrapper created by semantic ui
                var wrapper = sel.parentNode

            //find the associated semantic menu
                var cur_menu = $(wrapper).children('.menu')

            if(gel(cur_menu))
            {

                //get corresponding element to target element in semantic menu
                    var menu_el = $(cur_menu).children('div[data-value=' + target_el.value + ']')[0]

                //change the menu element to match the style of the <select> element
                    if(menu_el)
                    {
                        menu_el.style['display'] = target_el.style['display']
                    }

            }
        })

    //initialize config to look for changes to attributes
        var observer_config = {
            attributes: true,
        }

    //set observer on each <option>
        var target_nodes = gel('my_popup').querySelectorAll('option') //document.body
        for(var x=0;x<target_nodes.length;x++)
        {
            observer.observe(target_nodes[x], observer_config)
        }
}

function gel(el)
{
    if(document.getElementById(el))
    {
        return document.getElementById(el)
    }
    else if($(el).get(0))
    {
        return $(el).get(0)
    }
    else if((typeof el == 'object') && (Object.keys(el).length > 0))
    {
        return el
    }
    else
    {
        //console.log(el + ' not found')
        return false
    }
}

<select>未使用语义UI更新

1 个答案: