CODEWITHSUNDEEP
javascripthtmljqueryhtml-select
SeekLoad
SeekLoad

Reputation: 1089

How to swap places left to right of a few <option>, not all of them from within <select> using toggle button

How do I make a few <option> LangLEFT to switch position with a few <option> LangRIGHT and vise versa using a ON/OFF or LEFT/RIGHT toggle button or by using a radio button or a check box or another select menu.

I want a few <option> LangLEFT to tugle with a few <option> LangRIGHT and swap places, without swap places of the <select> names codes.

NOTE: Only a few <option> should switch places, NOT all <option>.

EXAMPLE: The "language value" should swap places, but the "auto value" should NOT.

HTML:

<textarea name="uLEFT" cols="71" rows="7" wrap="physical" id="SeekBoxLEFT"></textarea> 

<textarea name="uRIGHT" cols="71" rows="7" wrap="physical" id="SeekBoxRIGHT" ></textarea>

<select name="LangLEFT">
<option selected value="auto">Auto Identify language</option>
<option value="en">English</option>
<option value="ru">Russian</option>
</select>


<select name="LangRIGHT">
<option value="en">English</option>
<option value="ru">Russian</option>
</select>

Upvotes: 0

Views: 97

Answers (1)

Osama
Osama

Reputation: 3040

 	$(document).ready(function(){
			$("#right").on("click",function(){
      $("#left_select").insertAfter("#right_select");
      });
      $("#left").on("click",function(){
      $("#right_select").insertAfter("#left_select");
      });
			});
 <script src="https://cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js"></script>
 <input type="button" id="right" value="Change To Right" >
 <input type="button" id="left" value="Change To Left" >

        	<select id="left_select" name="LangLEFT">
        		<option selected value="auto">Auto Identify language</option>
        		<option value="en">English</option>
        		<option value="ru">Russian</option>
        	</select>
        	<select id="right_select" name="LangRIGHT">
        		<option value="en">English</option>
        		<option value="ru">Russian</option>
        	</select>

Upvotes: 2

Related Questions