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' />