如何在tablepress的下拉菜单下显示当前选定的值选项？

Question

I would like to know how to have the selected option value under dropdown after selecting it, because whenever I'm selecting any option, it gets deleted and comes beneath the dropdown option with a link. When you click it, it is going back to the dropdown menu. Code before selection

<div class="column-filter-widget">
    <select class="widget-0">
        <option value="">Healthy Life</option>
        <option value="Fruit">Fruit</option>
        <option value="Vegetable">Vegetable</option>
       <option value="Beef">Beef</option>
    </select>

HTML Code after selecting option as "Fruit"

<div class="column-filter-widget">
     <select class="widget-0">
         <option value="">Healthy Life</option>
         <option value="Vegetable">Vegetable</option>
         <option value="Beef">Beef</option>
     </select><a class="filter-term filter-term-fruit" href="#">Fruit</a>
 </div>

Css Code:

  .column-filter-widgets a.filter-term:hover {text-decoration: line-through!important;}

Here is the javasript file Click here to check javascript file. I know there are many threads similar to that but since this problem is for Wordpress Plugin tablepress datatables column filter widgets and it's under javascript file which I don't know how to solve. I'm sure the problem can easily be solved after looking at the above link.

Thanks

Answer 1

Try this, i'm assuming this what you were after from what i read, here's a JS Fiddle to show you http://jsfiddle.net/7a38ast6/7/

JQuery

var optionvalue = 0;
var optionvalueclass = ""

$('select.widget-0').change(function(){
    optionvalue = $('option:selected', this).text();
    optionvalue = optionvalue.replace(" ", "-");
    optionvalueclass = optionvalue.toLowerCase();
    $(".widget-0").after('<a class="filter-term filter-term-' + optionvalueclass + '" href="#">' + optionvalue + '</a>');
    $('option:selected', this).remove();
});