Блог

Главная - Вопросы по программированию - jQuery хранит или передает элементы выбора (выпадающий список)

jQuery хранит или передает элементы выбора (выпадающий список)

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

У меня есть ввод выбора, который заполняется sql-запросом. Я пытаюсь сделать следующее из-за последовательности событий, которые происходят для веб-страницы

1) Заполните список выбора 2) Очистите div, содержащий список выбора 3) Повторно используйте список выбора в новом div, который добавляется к html

Я никогда не покидаю страницу, но я уничтожаю элемент выбора. Я хочу иметь возможность сохранить элемент выбора для последующего использования. Я думал, что это будет так же просто, как:

 var teamList; 

$('.otherSelector').on('change',function(){
  $.post(url, {x:x},function(data){ 
    teamList = $('#teamList'); //actual select input

            $.each(data, function(key, val){
                var option = $('<option/>');
                option.attr('value', key)
                      .html(val)
                      .appendTo(teamList);
            });
  }

После заполнения списка команд нажимается кнопка, и он удаляется с помощью empty() . Однако я думал, что данные останутся в переменной teamList, потому что я не изменяю переменную при удалении элемента DOM. Может быть, я просто сохраняю его или называю неправильно? Я пытаюсь назвать это так:

 $('.selector').on('click',function(){
  var newStuff = '<form>' 
                 '<input name = "test" type = "text">' 
                 teamList 
                 '........etc
$('html').append(newStuff);

В элементе формы я вижу [object Object] вместо выпадающего списка.

Любая помощь приветствуется.

Мой собственный ответ:

teamList.prop(«outerHTML») на самом деле

Спасибо Патрику Эвансу

Ответ №1:

Это потому teamList , что это объект dom. По умолчанию при выполнении конкатенации строк объекта он будет распечатан [Object object] , а не содержимое объекта, в данном случае html-текст, составляющий элемент dom.

Чтобы повторно добавить выбор в форму, используйте append функцию jQuery.

 $('.selector').on('click',function(){
   var form = $('<form><input name = "test" type = "text"></form');
   form.append(teamList);
   $('body').append(form);
});

Также обратите внимание, что я изменил ваше $('html') $('body') значение, поскольку вы не должны добавлять содержимое непосредственно к <html> элементу.

Если вы хотите сделать это просто с помощью конкатенации строк, вам нужно будет использовать outerHTML функцию jQuery, которая вернет HTML-код элемента и его содержимое

 $('.selector').on('click',function(){
   var newStuff = '<form>' 
                 '<input name = "test" type = "text">' 
                 teamList[0].outerHTML 
                 '</form>';
   $('body').append(newStuff);
});

Комментарии:

1. Вы бы сказали, что разница между вашими двумя опубликованными методами — это просто предпочтение? И что плохого в привязке к html? Спасибо!

2. .prop(«outerHTML») на самом деле

3. Поскольку прямое добавление содержимого к <html> элементу является недопустимой разметкой html. Это работает только потому, что браузеры прощают ошибки в разметке html. И вы правы prop('outerHTML') , или получите фактический элемент dom и получите доступ outerHTML : teamList[0].outerHTML