扩展事件是否有下拉菜单？

Question

我想运行一个在我打开某个下拉菜单（选择）时总是触发的函数。我尝试的第一件事是 select 标签中的 onclick 事件，但问题是当我单击 Dropdown 内的任何选项时也会触发该功能。

该函数应该遍历具有特定类名的所有输入字段，并获取它们的值来构建下拉列表的选项，这一切正常。问题是，我无法选择其中一个选项，因为在我尝试选择某些内容后总是会触发 fillDropdownReq() 函数。

有什么方法可以在我打开下拉菜单时触发事件？

function fillDropdownReq(DD){
    let dropdown = $('#'+DD.id);

    dropdown.empty();

    dropdown.append('<option disabled>choose Prerequisite</option>');
    dropdown.prop('selectedIndex', 0);

    $(".fieldName_checkbox").each(function (){
        dropdown.append($('<option></option>').attr('value', $(this).val()).text($(this).val()));
    })
}

.fieldName_checkbox{
  float: left;
  margin: 5px;
}

.select_div{
  float: right;
  margin: 25px;
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input class="fieldName_checkbox" id="fieldName_checkbox1" value="testvalue1">
<input class="fieldName_checkbox" id="fieldName_checkbox2" value="testvalue2">

<div class="select_div">
<select id="fieldPrerequisitesSelect" onclick="fillDropdownReq(this)">
  <option selected="true" disabled>choose Prerequisite</option>
</select>
</div>

Answer 1

select 元素没有可用的“扩展”或“打开”事件。

这种情况的一种解决方法是颠倒您的逻辑；每当用户与用于创建其值的任何 input 字段交互时，填充 select 中的 option 元素，如下所示：

let $select = $('#fieldPrerequisitesSelect');
let updateOptions = () => {
  let options = $fields.map((i, el) => `<option value="${el.value}">${el.value}</option>`).get();
  options.unshift('<option selected="true" disabled>choose Prerequisite</option>');
  $select.html(options);
}

let $fields = $('.fieldName_checkbox').on('input', updateOptions);
updateOptions();

.fieldName_checkbox {
  float: left;
  margin: 5px;
}

.select_div {
  float: right;
  margin: 25px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input class="fieldName_checkbox" id="fieldName_checkbox1" value="testvalue1" />
<input class="fieldName_checkbox" id="fieldName_checkbox2" value="testvalue2" />

<div class="select_div">
  <select id="fieldPrerequisitesSelect">
    <option selected="true" disabled>choose Prerequisite</option>
  </select>
</div>

更新...

根据您在问题下的评论：

我必须这样做...当创建一个新的“选择”元素时，也要用选项填充它

然后您可以根据需要使用clone() 创建一个新的select，并将id 转换为class，这样您就可以同时更新所有select 元素中的选项。代码如下所示：

let updateOptions = () => {
  let options = $fields.map((i, el) => `<option value="${el.value}">${el.value}</option>`).get();
  options.unshift('<option selected="true" disabled>choose Prerequisite</option>');
  $('.fieldPrerequisitesSelect').html(options);
}

let $fields = $('.fieldName_checkbox').on('input', updateOptions);
updateOptions();

$('.duplicate-select').on('click', e => {
  let $clone = $('.select_div:first').clone().insertAfter('.select_div:last');
  $clone.find('select').prop('selectedIndex', 0);
});

input,
button,
.select_div {
  margin: 0 0 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input class="fieldName_checkbox" id="fieldName_checkbox1" value="testvalue1" /><br />
<input class="fieldName_checkbox" id="fieldName_checkbox2" value="testvalue2" /><br />

<button type="button" class="duplicate-select">Duplicate select</button>

<div class="select_div">
  <select class="fieldPrerequisitesSelect">
    <option selected="true" disabled>choose Prerequisite</option>
  </select>
</div>