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

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">