Question

我想在下拉菜单中单击，我会获得所选选项的值。之后我想过滤bootstrap-table的一个字段，它只显示带有该字段的记录。

我的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，目前只在控制台中显示消息＆＃39; undefined＆＃39;。

我不知道如何获取选项的值，也不知道如何过滤在字段中应用此值的表。

要过滤：

选择选项后：

桌子的头部消失了:(

Answer 1

添加此代码

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

使用更改事件获取选定的下拉值

$('#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 3

试试这个：

对于单个选择元素，要获取所选值：

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

获取所选文字：

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

Answer 4

绑定li的click事件，并根据HTML内容绑定到a锚标记，因此点击li标签找到a锚标记并找到其中的内容标签。下面的代码有助于查找内容。

HERE是更好解决方案的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'));
    });

获取下拉菜单和过滤器表的选项值

4 个答案: