JS实现select选中option触发事件操作示例

当用户在select元素中选择一个选项时，可以通过JavaScript来触发相应的事件，从而实现根据选项的不同而进行不同的操作。

以下是实现select选中option触发事件操作的完整攻略：

1. 给select元素添加change事件

要触发select选中option事件，首先需要给select元素绑定change事件。代码如下：

<select id="mySelect">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

<script>
  var select = document.getElementById('mySelect');
  select.addEventListener('change', function() {
    var selectedOption = select.options[select.selectedIndex];
    console.log(selectedOption.value);
    // 在这里添加需要执行的操作
  });
</script>

这个例子中，我们使用 JavaScript 获取到了 id 为 mySelect 的 select 元素，并在它上面绑定了一个 onchange 事件。当用户在 select 元素中选择某个选项时，会触发 change 事件，执行函数中的代码。

在事件处理函数中，我们首先获取 select 当前选中的 option，即 select.options[select.selectedIndex]。然后可以进行具体的操作，这里我们只是简单地将选中的 option 的 value 属性输出到了控制台，可以根据实际需求进行修改。

2. 使用jQuery实现

上面的例子使用原生的JavaScript实现，下面我们使用 jQuery 进行实现。这里我们同样给 select 元素添加了一个 change 事件，并将事件绑定到了一个 function 函数上。可以根据实际需求进行修改。

<select id="mySelect">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $('#mySelect').change(function() {
    var selectedOption = $(this).children("option:selected");
    console.log(selectedOption.val());
    // 在这里添加需要执行的操作
  });
</script>

这个例子使用了 jQuery 的选择器来获取 select 元素，并在它上面绑定了一个 change 事件。当用户在 select 元素中选择某个选项时，会触发 change 事件，执行函数中的代码。

在事件处理函数中，我们使用 jQuery 获取当前选中的 option，即 $(this).children("option:selected")，然后可以进行具体的操作。最后同样将选中的 option 的 value 属性输出到了控制台，可以根据实际需求进行修改。

以上就是实现select选中option触发事件操作的完整攻略，希望对你有所帮助。