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个元素。）

其他几个问题：

宣布MyLocation
MyLocation已经是一个jQuery对象。您不需要再次将其传递给jQuery以使用html方法

这是你的代码working example（略有修改，因此HTML片段会附加到表中，因此你可以实际看到结果）。

克隆并添加html片段，然后设置select / option值

1 个答案: