如何正确处理我的下拉菜单中的任何更改操作？

Question

我有一个下拉菜单，我想点击它们时触发一些东西。 我不确定是否应该使用.change或.click，或者哪一个是最好的做法。

但是现在我使用.click。

HTML

<div id="dd" class="wrapper-dropdown-1" tabindex="1"> <span class="summary-texts">Summary</span>
    <ul class="dropdown">
       <!-- Dynamic List will added here  -->
   </ul>
</div>

我曾经拥有的

$('#group-0').click(function() {
  updateInfo("0");
  chart.draw( data[0] , options);
  $("#dd.wrapper-dropdown-1 .summary-texts").text('Group 0 ');
});
$('#group-1').click(function() {
  updateInfo("1");
  chart.draw( data[1] , options);
  $("#dd.wrapper-dropdown-1 .summary-texts").text('Group 1 ');
});
$('#group-2').click(function() {
  updateInfo("2");
  chart.draw( data[2] , options);
  $("#dd.wrapper-dropdown-1 .summary-texts").text('Group 2 ');
});
$('#group-3').click(function() {
  updateInfo("3");
  chart.draw( data[3] , options);
  $("#dd.wrapper-dropdown-1 .summary-texts").text('Group 3 ');
});
$('#group-4').click(function() {
  updateInfo("4");
  chart.draw( data[4] , options);
  $("#dd.wrapper-dropdown-1 .summary-texts").text('Group 4 ');
});

它不是那么好，你可以看到，很多硬代码值。所以我重构了我的代码。

我现在拥有什么

for (var assignment in objects.assignments ) {

$('#group-'+assignment).click(function() {
  updateInfo(assignment);
  chart.draw( data[assignment] , options);
  $("#dd.wrapper-dropdown-1 .summary-texts").text('Group '+assignment);
});

}

结果

当我从下拉菜单中选择任何内容时，它会一直显示Group 4。 我不知道为什么会这样。

我是否以正确的方式优化它？

如何处理下拉菜单中的任何更改操作？

任何帮助/提示/建议都将对我有很大帮助。

Answer 1

我会摆脱for循环，只使用jquery。选择器中的^=会侦听以group-开头的ID。要获取实际的组号，您需要删除group-，否则分配将类似于group-2，而不仅仅是2。

$('#dropdown li').on('click',function(){
  var assignment=$(this).attr('id').replace('group-','');
  updateInfo(assignment);
  chart.draw( data[assignment] , options);
  $("#dd.wrapper-dropdown-1 .summary-texts").text('Group '+assignment);
});

Answer 2

而不是为每个项目添加新的点击事件（当项目与您的模式“group-x”不匹配时会发生什么？）在“ul”元素上添加点击事件，或者如果必须，在每个“li”元素，并使用DOM元素的“innerText”或“textProperty”属性获取文本。

以下是一些例子：

get the text in a list item and modify it with javascript

How to get Value / Text of a List item Javascript

我个人会尝试将click事件设置得尽可能高，以保持代码在页面上的清洁和加载时间的降低。

Answer 3

您有两种选择：

1°：使用选择：

<select>
    <option value='v'>text</option>
    ...
</select>

然后，您将在选择中添加更改侦听器。

2°：按照你的方式做（这可能是造型问题的一个很好的选择），但稍微调整一下。首先，正确地附加您的选项，如：

[ {
  "text": "Group 0",
  "value": 1
}, {
  "text": "Group 1",
  "value": 2
}, {
  "text": "Group 2",
  "value": 3
}, {
  "text": "Group 3",
  "value": 4
} ].forEach( function( el ) {
  $( "#dropdown" ).append( "<li data-info=\" + el.value + "\">" + el.text + "</li>" )
} );

然后，您应该使用事件委派。在ul上添加click事件。这在性能方面确实更好，它允许您在事件附件后附加选项。

$("#dropdown").on( "click", "li", function( e ) {
  console.log( $( e.target ).data( "info" ) )
  updateInfo( $( e.target ).data( "info" ) );
  chart.draw( data[ $( e.target ).data( "info" ) ] , options);
} );

我已经让你成为一个js bin来玩它：https://jsbin.com/posuzeyija/edit?html,js,console,output

Answer 4

让我们考虑您的代码目前正在做什么：

  

迭代objects.assignments，将assignment定义为   当前执行上下文中的变量。在每次迭代中，   获取object.assignments的下一个可枚举属性并给它   到assignments。

例如，如果在for循环完成后您添加了console.log(assignment)，您会发现它在assignment循环中写入给for的最后一个值：4。为什么？因为变量assignment不限于for循环。 For循环不会创建自己的范围。

因此，当调用任何点击处理程序时，它们将访问给予assignment的最后一个值，即4。

我们可以通过使用jQuery的each()函数来避免此问题，因为函数会创建自己的范围。

$.each(objects.assignments, function(index, value) {
    $('#group-' + index).click(function() {
        updateInfo(index);
        chart.draw(data[index] , options);
        $("#dd.wrapper-dropdown-1 .summary-texts").text('Group ' + index);
    });
});

Answer 5

不会选择＆＃39;元素要好于有一个＆＃39; ul＆＃39;并使用CSS使其作为下拉列表工作？

无论如何，＆＃39; .change＆＃39;和＆＃39; .click＆＃39;是不同的事情。第一个将在项目被更改时执行，因此如果您单击之前选择的相同项目，则不会执行任何操作。每次单击任何元素时，后者将运行代码，无论之前选择了什么。你需要考虑你想要或需要哪一个。

以下是使用select：http://jsfiddle.net/sf3buwbq/

创建它的快速解决方案

$('#select').change(function() {
   $(this).find("option:selected");
});

我不确定您是否明白这可以实现，并且您可以在

中存储您想要的所有信息

<option> </option>

Answer 6

让我修改你的代码。 html可能如下所示。

<ul class="dropdown">
       <li class="groups" id="group-1">
       <li class="groups" id="group-2">
   </ul>

然后摆脱任务循环

$('.groups').click(function() {
var element_id = $(this).attr("id").split("-")[1];
  updateInfo(element_id);
  chart.draw( data[element_id] , options);
  $("#dd.wrapper-dropdown-1 .summary-texts").text('Group '+element_id);
});

享受!!