javascript - 如何互换两个在选择任何下拉值时使用 jquery 在 HTML 中的位置？

Question

我*有两个<div>容器需要在下拉值更改时交换它们的显示位置。

那么，如何使用 Jquery 来实现呢？

下面是显示位置需要互换的两个 div 容器

<div id="first"><p>I will be displayed on second place on dropdown's particular value</p></div>

<div id="second"><p>I will be displayed on first place on dropdown's same value for which first div is placed at second position</p></div>

Answer 1

简单使用 Javascript

<script>

function interchange()
{
 var strDiv1Content = document.getElementById('first').innerHTML;
 var strDiv2Content = document.getElementById('second').innerHTML;

 document.getElementById('first').innerHTML = strDiv2Content;
 document.getElementById('second').innerHTML = strDiv1Content;

}

</script>

使用 jQuery

<script>
function interchange()
{
  var strDiv1Cont = $("#first").html();
  var strDiv2Cont = $("#second").html();

  $("#first").html(strDiv2Cont);
  $("#second").html(strDiv1Cont);
}

</script>

在某些按钮单击时调用函数交换

<input type ='button' value ='interchange' onclick='interchange' />

Answer 2

这会做到的。

var firstHtml = $('#first').html();
var secondHtml = $('#second').html();

$('#second').html(firstHtml);
$('#first').html(secondHtml);