Is it possible to showing unselected options in text box through jquery? - php

Question

Is it possible to showing selected value from another text box & unselected options to another text box.
For example , I have 2 text boxes & one select box with options(location_1,location_2,location_3).
So when i select option location_2 or any then selected option value will be showing in text_box_1 & remaining unselected options (location_1,location_3) that value will be appearing into another text box is text_box_2.
I have tried to do following ways but only get select option value not unselect.
HTML
<select name="pd_location[]" class="form-control">
<option value="">-- Choose --</option>
<option value="1">Location One</option>
<option value="2">Location Two</option>
<option value="3">Location Three</option>
<option value="4">Location Four</option>
</select>
Jquery
$(document).on('change', '.select_location', function() {
var get_sel_option = $(this).attr("selected_val");
var index= $(".select_location").prop('selectedIndex');
if(index){
var sel_option_test= $('.select_location option ').attr("selected","selected");
}
});
How could i get unselect option values ?

Answer 1

You can use jQuery.map() to get all the options not selected.
Description: Translate all items in an array or object to new array of
items.
$('select[name="pd_location[]"]').on("change", function() {
$('.text_box').val('');
var selected = this.value;
if( selected ) {
$('#text_box_1').val( selected );
var unselected = $(this).find('option:not(:first):not(:selected)').map(function() { return this.value; }).get().join(",");
$('#text_box_2').val( unselected );
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="pd_location[]" class="form-control">
<option value="">-- Choose --</option>
<option value="1">Location One</option>
<option value="2">Location Two</option>
<option value="3">Location Three</option>
<option value="4">Location Four</option>
</select>
<input name="text_box_1" id="text_box_1" class="text_box">
<input name="text_box_2" id="text_box_2" class="text_box">