獲取下拉菜單和篩選表選項的值

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