Как заменить этот элемент <select>с помощью jquery?

Question

У меня есть элемент в моей форме.

<select name="states" disabled="disabled" size="10" id="select-states"><optgroup label="Choose State &raquo;&nbsp;">Choose State</optgroup></select>

Я хотел бы заменить вышеуказанный элемент select новым <select> i, полученным от AJAX.

$.ajax({
    type: 'POST',
    url:  'process.php',
    data: 'countryId='+countryId,
    success: function(msg){
        if(msg == 0) {
            //Query returned empty.
        } else {
            //Query Has values.
            $('#select-states').html(msg);
        }
    }
});

например, приведенный выше Ajax Request возвращает мне следующий HTML.

<select name="states" size="10" id="select-states">
    <optgroup label="Choose State">Choose State</optgroup>
    <option value="36">First State</option>
    <option value="37">Second State</option>
    <option value="38">Third State</option>
    <option value="39">Fourth State</option>
</select>

Синтаксис $('#select-states').html(msg);, похоже, неправильно заменяет содержимое в элементе <select>. однако, если я заменю его на div, он будет работать правильно. который является правильным синтаксисом для замены <select> элемента

Answer 1

Я думаю, что вы можете использовать replaceWith () , например:

$.ajax({
    type: 'POST',
    url:  'process.php',
    data: 'countryId='+countryId,
    success: function(msg){
        if(msg == 0) {
            //Query returned empty.
        } else {
            //Query Has values.
            $('#select-states').replaceWith(msg);
        }
    }
});

Теперь у вас есть код, который вставляет новый select элемент внутрь изстарый, который не будет работать.

Другой вариант - обернуть элемент select в контейнер и установить содержимое контейнера, например:

<div id="selectContainer">
    <select name="states" disabled="disabled" size="10" id="select-states"></select>
</div>

$.ajax({
    type: 'POST',
    url:  'process.php',
    data: 'countryId='+countryId,
    success: function(msg){
        if(msg == 0) {
            //Query returned empty.
        } else {
            //Query Has values.
            $('#selectContainer').html(msg);
        }
    }
});

Answer 2

В идеале, вы можете заменить только <option/> на <select>.

Answer 3

Вы были близки. Просто измените эту строку:

$('#select-states').html(msg);

Кому:

$('#select-states').replaceWith(msg);

Как у вас сейчас, он вставит ваш новый выбор в старый, и вы получите странный HTML-код с двумя элементами с одинаковым идентификатором и выбором непосредственно внутри другого, например:

<select name="states" disabled="disabled" size="10" id="select-states">
    <select name="states" size="10" id="select-states">
        <optgroup label="Choose State">Choose State</optgroup>
        <option value="36">First State</option>
        <option value="37">Second State</option>
        <option value="38">Third State</option>
        <option value="39">Fourth State</option>
    </select>
</select>

Answer 4

.html() заменит содержимое элемента (элементы <optgroup> и <option>).Так что это, вероятно, привело бы к <select><select>...</select></select>.Вы действительно хотите .replaceWith().

Между прочим, возможно, вы могли бы использовать Firebug Firefox или Chrome's Inspector, чтобы выяснить это, просто изучив DOM.

Кроме того, иногда, когда вы выполняете такую ​​операцию на входах формы, вводне будет повторно связан с формой, поэтому при отправке его параметр будет отсутствовать.(Это особенно происходит в старых версиях Internet Explorer).Таким образом, это может помочь вручную повторно связать базовый элемент с формой, например $('form#myform').get(0).selectState = $('#select-states').get(0);

Конечно, если вы действительно хотите просто изменить содержимое выбора, вы, вероятно, должны делать это, а не возитьсясо всем входом.И это также позволит избежать проблемы повторной ассоциации форм.