Поменять местами value в Jquery

25 июня 2021, 15:40

Добрый день как можно поменять местами скриптом value="2">П2 и value="5">П5.

HTML

<select id="inbound_from" name="blockger2016.inbound_from" onchange="mzchange()" style="display: block;">
<option value="" disabled="" selected="">От кого</option>   
<option value="1">П1</option>
<option value="2">П2</option>
<option value="3">П3 </option>
<option value="4">П4 </option>
<option value="5">П5 </option>
</select>

Хотелось бы видеть так HTML

<select id="inbound_from" name="blockger2016.inbound_from" onchange="mzchange()" style="display: block;">
<option value="" disabled="" selected="">От кого</option>   
<option value="1">П1</option>
<option value="5">П5</option>
<option value="3">П3 </option>
<option value="4">П4 </option>
<option value="2">П2 </option>
</select>

Answer 1

Вариант без jQuery:

var select = document.getElementById('inbound_from'); 
var option = select.querySelectorAll('option'); 
 
viceVersa( option[2], option[5] ); 
 
function viceVersa(a, b){ 
  helper = document.createElement( b.tagName ); 
  // не div, потому что плохо знаю HTML - вдруг есть теги, где браузер не принимает div 
  b.insertAdjacentElement('afterend', helper); // .after(...); 
   
  a.insertAdjacentElement('afterend', b); 
  helper.insertAdjacentElement('afterend', a); 
 
  helper.parentNode.removeChild(helper); // .remove(); 
} 
 
setInterval( function(){ viceVersa( option[2], option[5] ); }, 1000 ); // ненужное демо

<select id="inbound_from" size="6"> 
  <option value="" disabled="" selected="">От кого</option> 
  <option value="1">П1</option> 
  <option value="2">П2</option> 
  <option value="3">П3 </option> 
  <option value="4">П4 </option> 
  <option value="5">П5 </option> 
</select>

Answer 2

Вариант c jQuery:

jQuery.fn.swap = function(b) {
    b = jQuery(b)[0];
    var a = this[0],
        a2 = a.cloneNode(true),
        b2 = b.cloneNode(true),
        stack = this;
    a.parentNode.replaceChild(b2, a);
    b.parentNode.replaceChild(a2, b);
    stack[0] = a2;
    return this.pushStack( stack );
};
 $("option:nth-child(3)").swap("option:nth-child(6)");