Выбранное значение для клонированного элемента не работает должным образом

0

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 как строку, так как библиотека, которая ее использует, ожидает строку.

Теги:

3 ответа

3
Лучший ответ

Там нет причин, чтобы туда-обратно с разметкой для этого, и я подозреваю, что проблема, так как 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);

Обновленная рабочая скрипка

Поделиться
0

См. Эту ссылку. Вы не можете установить 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);
});
Поделиться
  • 0
    Это сделало это; благодарю вас!
  • 1
    val jQuery действительно работает с элементами select . Проблема заключается в передаче туда и обратно, которая теряет selectedIndex из select . Это также работает, потому что selected атрибут элемента option сериализуется. Но опять же, просто нет причин для поездки в разметку.
Показать ещё 1 комментарий
0

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);
});
Поделиться
  • 1
    «проблема здесь в том, что у вас ничего не выделено» Но тогда OP явно устанавливает значение для клонированного select , после его клонирования.
  • 0
    @TJCrowder это бит, который я имею в виду: «Я думал, что мое выбранное значение 300 будет сохранено» - но ничего не выбрано
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню