Question

我有两个选择，最初在firefox和IE8中以这种方式呈现：

<select id="cntctMap_PRSNL_TITL_TXT" >
<option value="Dr.">Dr.</option>
<option value="Ms.">Ms.</option>
<option value="Mrs.">Mrs.</option>
<option selected="" value="Mr.">Mr.</option>
</select>

<select id="cntctMap_CUST_SEGM_US_RETAIL_SALES_SMA"">
<option value="01">Focus</option>
<option value="02">Prospect</option>
<option value="03">Center Of Influence</option>
</select>

到目前为止，只有第一个select有一个从服务器端返回的值，第二个没有。

在文档加载时，我拉第二个选择的html，即$("#cntctMap_CUST_SEGM_US_RETAIL_SALES_SMA").html());

在IE中，返回的字符串是：

<option selected value="01">Focus</option><option value="02">Prospect</option><option value="03">Center Of Influence</option>

注意'selected'属性

但在firefox中它是：

<option value="01">Focus</option><option value="02">Prospect</option><option value="03">Center Of Influence</option>

这对我来说很重要的原因是我想要一个选项，即

$("#cntctMapCUST_SEGM_US_RETAIL_SALES_SMA").prepend(selectOption);

并在下拉框中显示前置选项值，但我只想对那些没有服务器端值的选项执行此操作。

在IE浏览器中，我无法分辨哪些是因为'selected'在所有情况下都会回来。如果我使用$("#cntctMap_CUST_SEGM_US_RETAIL_SALES_SMA option:selected"));，这也是如此。在IE中，它总是返回一个'selected'选项。

有人知道解决这个问题吗？

Answer 1

正如评论中所讨论的，我建议添加一个特殊类（例如has-default）来选择具有服务器端值的选项。这在渲染标记时在服务器端完成。

<select id="cntctMap_PRSNL_TITL_TXT" class="has-default">
<option value="Dr.">Dr.</option>
<option value="Ms.">Ms.</option>
<option value="Mrs.">Mrs.</option>
<option selected="" value="Mr.">Mr.</option>
</select>

<select id="cntctMap_CUST_SEGM_US_RETAIL_SALES_SMA">
<option value="01">Focus</option>
<option value="02">Prospect</option>
<option value="03">Center Of Influence</option>
</select>

...

使用jQuery，您可以使用服务器端值定位选择：

$('select.has-default').prepend(selectOption);

上述语句只会将selectOption添加到具有has-default类的选择中。这更加一致，因为它不依赖于浏览器是否与<option>标签混合在一起。

jQuery选择标签IE8问题

1 个答案: