<select> не обновляется с Semantic UI - PullRequest
Новая
       20

<select> не обновляется с Semantic UI

2 голосов
/ 20 сентября 2019

У нас есть всплывающее окно, содержащее форму с несколькими тегами 

<select id="select1" class="ui dropdown"></select>

Он не обновляет раскрывающиеся списки, которые он создает («меню»), когда изменяется базовый

ОБНОВЛЕНИЕ: Я пробовал это: 

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

, и меню семантического интерфейса пользователя сделало не обновление.

ОБНОВЛЕНИЕ 2 В некоторых случаях "добавляются" или "удаляются", просто изменяя их отображение на нет вместо фактическиудаляя их из

1 Ответ

0 голосов
/ 20 сентября 2019

Я решил продвинуться вперед и создал проверку концепции, чтобы посмотреть, есть ли способ справиться с этим.Я создал mutationobserver, чтобы искать изменения атрибутов каждого во всплывающем окне, и чтобы семантическое меню «пользовательский интерфейс» соответствовало свойству отображения ассоциированного объекта.Похоже, работает. 

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
    }
}
...