如何模仿下拉列表的功能？

Question

儘管在StackOverflow上發佈了類似的問題，但這並不能解決我的問題。所以我有一個下拉菜單，當它發生變化時，它們的選項會執行某些操作，基本上，它們會提交一個表單並相應地更改數據。下面是示例代碼來顯示下拉菜單

<select class="select" onchange="submitData()" id="Filter"> 
    <option value="-1" selected="">Items</option> 
    <option value="0">Unread</option> 
    <option value="1">Read</option> 
</select> 

而這是當我們從下拉菜單中更改項目時調用的函數。

<script> 
    submitData = function() {document.formHeader.submit();} 
</script> 

在「formHeader」中，有一個用於顯示數據的表單。當我更改下拉列表中的項目時，相應地獲取更改所以基本上我想將submitData功能轉換爲列表。有沒有辦法做到這一點？

Answer 1

使用更改事件

<select class="select" id="Filter"> 
    <option value="-1" selected="">Items</option> 
    <option value="0">Unread</option> 
    <option value="1">Read</option> 
</select> 

在變化獲取價值並決定要提交

$("#Filter").change(function() { 
    var val = $(this).val(); 
    if(val == -1) 
    { 
    $("#ItemForm").submit(); 
    } 
    else if(var == 0) 
    { 
    $("#UnreadForm").submit(); 
    } 
    else 
    { 
    $("#ReadForm").submit(); 
    } 
}); 

希望這有助於你

使用列表

<ul> 
    <li class="filter" data-form="ItemForm">Items</li> 
    <li class="filter" data-form="UnreadForm">Unread</li> 
    <li class="filter" data-form="ReadForm">Read</li> 
</ul> 

<script type="text/javascript"> 
    $(function() { 
    $('.filter').click(function(){ 
     var form = $(this).data('form'); 
     $('#'+form).submit(); 
    }) 
    }); 
</script>