如何使用jquery替换此元素？

我的表格中有一个元素。

Choose State 

我想用从AJAX收到的新替换上面的select元素。

 $.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请求给了我以下HTML。

  Choose State First State Second State Third State Fourth State  

语法$('#select-states').html(msg); 似乎没有在元素中正确替换内容。 但是，如果我用div替换它，它可以正常工作。 这是替换元素的正确语法

Answer 1

你很亲密 只需改变这一行：

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

至：

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

你现在拥有它的方式它会将你的新选择插入到旧的选择中，你会得到一些奇怪的html，其中两个元素具有相同的id，并且直接在另一个内部选择，例如：

   Choose State First State Second State Third State Fourth State   

Answer 2

我认为你可以使用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元素包装在容器中，并设置容器的内容，如：

 
  
 $.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 3

理想情况下，您可以做的只是替换的 。

Answer 4

.html()将替换项目的内容（ 和元素）。 这可能会导致... 。 你真的想要.replaceWith() 。

顺便说一句，你可能只是通过检查DOM来使用Firefox的Firebug或Chrome的Inspector来解决这个问题。

此外，有时，当您在表单输入上执行此类手术时，输入将不会与表单重新关联，因此在您提交时其参数将丢失。 （这在旧版本的Internet Explorer中尤其如此）。 因此，手动将底层元素与表单重新关联可能会有所帮助，例如$('form#myform').get(0).selectState = $('#select-states').get(0);

当然，如果你真的只想改变选择的内容，你可能应该这样做，而不是搞乱整个输入。 这也将避免forms重新关联问题。