获取下拉菜单和筛选表选项的值

Question

我想在下拉菜单中单击，并获取所选选项的值。之后，我想筛选引导表的一个字段，并只显示该字段的记录。

在那一刻我的jQuery的代码是这样的：

$('#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是下拉菜单的ID，并在目前只有它显示控制台的消息'未定义'。

我不知道如何获得期权的价值，也没有如何筛选在现场应用该值的表。

要筛选：选择选项

后：

表的头消失:(

Answer 1

使用更改事件的单击事件获取所选的下拉值

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

为了过滤表格，你可以使用html5的数据属性。 添加

<tr data-ediction='edion-12'></tr> 

在下拉菜单的变化隐藏的不包含该值的所有行： -

$("tr[data-ediction!='eion-12']").hide(); 
    $("tr[data-ediction='eion-12']").show(); 

退房这里https://jsfiddle.net/nar2bnx1/

与头更新总是可用： - https://jsfiddle.net/nar2bnx1/1/

更新了多个过滤器： - https://jsfiddle.net/nar2bnx1/2/

Answer 2

试试这个：

对于唱乐选择元素，以获得所选择的值：

$('#dropDownId').val(); 

获取所选文本：

$('#dropDownId :selected').text(); 

Answer 3

添加该代码

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

演示在这里：https://jsfiddle.net/2fkb95ur/1/

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

演示在这里： https://jsfiddle.net/2fkb95ur/2/

Answer 4

绑定li的点击事件，并根据HTML内容绑定到a锚标签，所以点击li标签找到a锚标签并找到标签内的内容。以下代码有助于查找内容。

这里是更好的解决方案的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='#' data-value="<?php echo $row[2] ?>"><?php echo $row[1] .' '. $row[2]; ?></a></li> 
       <?php 
       } 
       ?> 
     </ul> 
</div> 

这里是li标签

$('#edicion li').click(function(v){ 
        console.log($(this).find('a').data('value')); 
    });