клонировать и добавить HTML-фрагмент, затем установить значение select / option

Question

При событии щелчка я хочу добавить фрагмент HTML-кода, который включает в себя поле выбора / опции, на страницу.Сначала я получаю подходящее место для его размещения, затем беру фрагмент кода в строке javascript и превращаю его в объект jquery.Далее я хочу выбрать соответствующее значение в окне выбора / опции.В этом примере у меня возникли проблемы с настройкой правильного поля выбора / опции.

tplReasons = "<td>Reason</td>\n\
    <td class='none'>\n\
    <div data-role='fieldcontain' class='select'>\n\
        <select class='myClass' name='select-choice-1' id='select-choice-1'>\n\
            <option value='01'>option 1</option>\n\
            <option value='02'>option 2</option>\n\
            <option value='03'>option 3</option>\n\
        </select>\n\
    </div>\n\
    </td>\n";



$('.my_class').live('change', function (){  
   var MyLocation = $('some_div');
   var MytplReasons = $(tplReasons);                        
   if(someCondition == 2){
     $('MytplReasons .myClass option').get(2).attr('selected', 'selected');
   }
   // (add jquery mobile formatting)
   MytplReasons.appendTo(MyLocation).trigger('create');                 
});     

</script>

Answer 1

Предполагая, что я понял, что вы пытаетесь сделать, есть несколько проблем с вашим кодом. Я думаю, что вы пытаетесь сделать, это установить выбранную опцию во фрагменте HTML (вероятно, вы собираетесь добавить этот фрагмент HTML в DOM).

Эта строка вызывает проблемы:

$('MytplReasons .myClass option').get(6).attr('selected', 'selected');

Во-первых, селектор начинается с MytplReasons, поэтому jQuery будет искать элемент типа MytplReasons, которого не существует. Вам нужно было найти элементы, соответствующие .myClass option, во фрагменте HTML, содержащемся в MytplReasons. Для этого вы можете использовать MytplReasons в качестве контекста:

$('.myClass option', MytplReasons)

Во-вторых, get возвращает базовый элемент DOM, а не объект jQuery. Элементы DOM не имеют метода attr. Вам нужно использовать eq вместо:

$('.myClass option', MytplReasons).eq(6).attr('selected', 'selected');

Еще одна проблема (возможно, только из-за того, что вы сократили код в вопросе) заключается в том, что в индексе 6 нет соответствующего элемента (в вашем фрагменте только 3 option элементов).

Пара других вопросов:

1. Вы пропустили точку с запятой после объявления MyLocation
2. MyLocation уже является объектом jQuery. Вам не нужно снова передавать его в jQuery, чтобы использовать html метод

Вот рабочий пример вашего кода (слегка измененный, поэтому фрагмент HTML добавлен в таблицу, чтобы вы могли увидеть результат).