如何將Dropdown onchange事件轉換爲列表onclick事件

Question

我有一個下拉列表，我使用onchange方法做了一些功能操作。

bu其他一些頁面我想在列表視圖中使用相同的功能，但我不想複製我的腳本列表查看任何其他可能性。

<select id="filerProduct" name="filerProduct" onchange="filerProductBySearch(this);"> 
<option value="aa" id="aa">AA</option> 
<option value="bb" id="bb">BB</option> 
</select> 

轉換下拉以下面列出

列表查看：

<ul id="filerProduct" name="filerProduct"> 
<li value="aa" id="aa" onclick="filerProductBySearch(this);">AA</li> 
<li value="bb" id="bb" onclick="filerProductBySearch(this);">BB</li> 
</ul> 

腳本下拉平變化：

function filerProductBySearch(event) 
    { 

     $('#filerProduct').val(event.value); 
    } 

我想用同樣的功能歸檔列表onclick

Answer 1

將特定值傳遞給處理函數。 event.target.tagName可用於獲取調用事件的tag。

function filerProductBySearch(value, event) { 
 
    $('#output').text('Passed value is: ' + value + ' And element is: ' + event.target.tagName); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<select id="filerProduct" name="filerProduct" onchange="filerProductBySearch(this.value,event);"> 
 
    <option value="aa" id="aa">AA</option> 
 
    <option value="bb" id="bb">BB</option> 
 
</select> 
 

 
<ul id="filerProduct" name="filerProduct"> 
 
    <li value="aa" id="aa" onclick="filerProductBySearch(this.id,event);">AA</li> 
 
    <li value="bb" id="bb" onclick="filerProductBySearch(this.id,event);">BB</li> 
 
</ul> 
 
<p id='output'></p>

Answer 2

我認爲，這裏最好PRACTIC是

<select id="filerProductSelect" name="filerProduct" > 
    <option value="aa" id="aa">AA</option> 
    <option value="bb" id="bb">BB</option> 
</select> 

<ul id="filerProduct" name="filerProduct"> 
    <li data-value="aa" id="aa">AA</li> 
    <li data-value="bb" id="bb">BB</li> 
</ul> 
<script> 
    $(document).ready(function() { 
     $('#filerProduct > li').click(
     { 
      var value = $(this).attr('data-value'); 
      $('#filerProductSelect').val(value); 
     }) 
    }); 
</script>