ruzD ruzD - 1 month ago 6
HTML Question

Get value of option of the dropdown menu and filter table

I would like to click in the dropdown menu and I get the value of the selected option. After that I would like to filter a field of the bootstrap-table and it show only the records with this field.

enter image description here

At moment my code of the jquery is this:

$('#edicion').click(function(v){
console.log(v.target.value);
});


HTML:

<div class="dropdown pull-left btn-group" style="padding-right: 10px;">
<button class="btn dropdown-toggle" type="button" data-toggle="dropdown">EDICIÓ<span class="caret"></span></button>
<ul class="dropdown-menu text-center" id="edicion">
<?php
$result = dbQuery($conn, "SELECT * FROM produccion.ma_edicion");
while ($row = pg_fetch_row($result)){ ?>
<li><a href=#><?php echo $row[1] .' '. $row[2]; ?></a></li>
<?php
}
?>
</ul>
</div>


#edicion
is the id of the Dropdown Menu and at moment only it shows in the console the message 'undefined'.

enter image description here

I do not know how to get the value of the option nor how to filter the table applying this value at field.

Answer

Add this code

<select id="edicion">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

$(document).on("change", '#edicion', function(){
    console.log($(this).val());
});

Demo here: https://jsfiddle.net/2fkb95ur/1/

$('#edicion li').click(function(){
    console.log($(this).text());
});

Demo here: https://jsfiddle.net/2fkb95ur/2/