Fiddle здесь, содержащий этот код: http://jsfiddle.net/enp2T/6/
<select id="aList">
<option value="0">0</option>
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
</select>
<div id="newListContainer"></div>
$(function() {
var value = 300;
var clonedList = $('#aList').clone();
var listHtml = clonedList
.removeAttr('id')
.val(value)
.wrap('<div/>')
.parent()
.html();
$('#newListContainer').html(listHtml);
//$('#newListContainer>select').val(value);
});
Я думал, что мое выбранное значение 300 будет сохранено, но listHtml просто содержит клон исходного списка. Я в ситуации, когда было бы больно пытаться повторно найти объект и установить его значение после его рисования (передача его в другую функцию внешних библиотек откладывает рендеринг до более позднего времени, без полного обратного вызова, если я не изменю эту библиотеку напрямую, Я стараюсь избегать).
Так что я делаю что-то ужасно неправильно? Отсутствует причуда?
Уточнение: мне нужно передать HTML как строку, так как библиотека, которая ее использует, ожидает строку.
Там нет причин, чтобы туда-обратно с разметкой для этого, и я подозреваю, что проблема, так как JQuery val
устанавливает selectedIndex
из select
элемента, который не получает сериализованным.
Просто используйте клонированный элемент:
var wrappedList = clonedList
.removeAttr('id')
.val(value)
.wrap('<div/>')
.parent();
// Note: Not doing '.html()' at the end
// html(...) would empty the container and then add the HTML, so
// we empty the container and then append the wrapped, cloned list
$('#newListContainer').empty().append(wrappedList);
См. Эту ссылку. Вы не можете установить value
для select
, вы должны установить selected
атрибут на элемент со value=300
.
$(function() {
var value = 300;
var clonedList = $('#aList').clone();
clonedList.find('option[value="' + value + '"]').attr("selected", true);
var listHtml = clonedList
.removeAttr('id')
//.val(value)
.wrap('<div/>')
.parent()
.html();
$('#newListContainer').html(listHtml);
//$('#newListContainer>select').val(value);
});
У меня есть ошибка. @TJ Кроудер прав. jQuery может установить value
select по функции .val(value)
. ссылка
$(function() {
var value = 300;
var clonedList = $('#aList').clone();
var holderCloned = clonedList.removeAttr('id').val(value).wrap('<div/>').parent();
$('#newListContainer').empty().append(holderCloned);
});
jQuery клонирует список с тем, что вы выбрали - проблема в том, что у вас нет ничего выбранного, поэтому вы клонируете выпадающее меню без выбранного значения (см. здесь).
Для обновленной версии этого скрипта проверьте этот обновленный jsFiddle.
Код:
$(function() {
var value = 300;
var clonedList = $('#aList').clone();
clonedList.find('option[value="' + value + '"]').attr('selected', 'selected');
var listHtml = clonedList
.removeAttr('id')
.val(value)
.wrap('<div/>')
.parent()
.html();
$('#newListContainer').html(listHtml);
//$('#newListContainer>select').val(value);
});
select
, после его клонирования.
val
jQuery действительно работает с элементамиselect
. Проблема заключается в передаче туда и обратно, которая теряетselectedIndex
изselect
. Это также работает, потому чтоselected
атрибут элементаoption
сериализуется. Но опять же, просто нет причин для поездки в разметку.