ドロップダウンの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> 

のonchange

スクリプトドロップダウン：私は、同じ機能を使用したい

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> 

だと思います