Question

有一个动态生成的html，上面有一个select元素。我们可以在里面选择一个选项，它运行正常。

就像：

<div id="test">
  <select>
      <option value="1">1</option>
      <option value="2" selected="selected">2</option>
  </select>
</div>

然后尝试使用：

var htmlstr= jQuery("#test").html();
alert(htmlstr);

获取html字符串。在IE浏览器中没问题。但是在chrome（最新版本）中，选项的选定属性将从字符串中删除。 alert（htmlstr）返回如下结果：

<div id="test">
   <select>
      <option value="1">1</option>
      <option value="2">2</option>
   </select>
</div>

所选的=＆＃34;已选择＆＃34;不见了。

我使用jquery-1.9.1.min.js

我不知道jquery的问题或chorme的问题。

非常感谢你！或者我如何以另一种方式获得上面的HTML？我需要将它保存到数据库中。

你的，伊万

Answer 1

在我测试的每个jQuery版本中，代码在最新的Chrome中运行良好。我希望警报只输出选择，没有父div ......这就是以下jsfiddle输出的内容：

$(function() {
    var div = $('<div id="test"/>'),
        opt = $('<option/>');
    $('<select/>').html( opt.clone().val(1).text(1) )
    .append( opt.clone().val(2).text(2).attr('selected','selected') )
    .appendTo( div.appendTo('body') );
    console.log( $('#test').html() );
});

http://jsfiddle.net/fiddleyetu/886Y3/

输出：

<select><option value="1">1</option><option value="2" selected="selected">2</option></select>

注意：请仔细检查以确保页面上没有其他元素具有相同的id =“test”。如果有，则会出现不一致的浏览器结果，因为无法保证不同的浏览器会以相同的方式处理无效的HTML。

Answer 2

我终于找到了问题。我误解了元素的行为。我曾经想过，当我选择一个元素时，它会将我选择的选项标记为＆＃34; selected = seleted＆＃34;自动。不是吗。

我将html更改为：

<select id='conditionpref"+connum+"' style='width:65px;'  onchange ='javascript:return changeconditionpref.apply(this);' name=''><option value='0'>0</option><option value='1'>1</option></select>

并将js代码设置为：

function changeconditionpref()
{
 var id=jQuery(this).attr("id");
  jQuery("#"+id+" option:selected").attr('selected','selected');
}

现在问题已经消失。

谢谢大家！

你的，伊万

jQuery.html（）将删除选择选项的所选属性

2 个答案: