Question

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

在其他一些页面我想在列表视图中使用相同的功能，但我不想复制我的脚本列表视图任何其他可能性。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我认为，这里最好的实践是

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

如何将Dropdown onchange事件转换为列表onclick事件

2 个答案: