是否可以通過jquery在文本框中顯示未選擇的選項？

Question

是否可以從另一個文本框中顯示選定的值，並在另一個文本框中顯示未選定的選項。

例如，我有2個文本框和一個選擇框，其中包含options(location_1,location_2,location_3) 。

因此，當我選擇選項location_2或任何隨后選擇的選項值將顯示在text_box_1 ，而其余​​未選擇的選項(location_1,location_3)將在另一個文本框中顯示該值，即text_box_2 。

我試圖做以下方法，但只能獲得選擇選項值而不是取消選擇。

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");  
        }

     });

我如何獲得取消選擇的價值？

Answer 1

您可以使用jQuery.map()獲取所有未選中的選項。

說明：將數組或對象中的所有項目轉換為新的項目數組。

 $('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">