如何为动态创建的option元素添加onclick属性？

当然可以实现啦！这里有两种常用的方法，根据你的需求选择：

方法一：直接为Option设置onclick属性 #

你可以在创建Option元素后，直接为它添加onclick属性，或者通过jQuery的attr()方法来设置：

// 创建新的Option元素
const newOption = new Option("i", "i");
// 方式1：直接设置DOM元素的onclick属性（functionname是你的目标函数名）
newOption.onclick = functionname; 
// 方式2：用jQuery设置onclick属性（如果函数需要传参，可写成字符串形式）
// $(newOption).attr('onclick', 'functionname()');

// 追加到目标select中
$(obj).closest('td').next('td').find('.select').append(newOption);

方法二：使用事件委托（更推荐） #

直接给动态元素绑定事件，有时候会因为元素未完全加载而失效。事件委托是更可靠的方案——它把事件绑定在父级静态元素（比如document），当事件冒泡到父级时触发，不管元素是静态还是动态添加的都能生效：

// 给目标select下的所有option绑定点击事件（包括后续动态添加的）
$(document).on('click', '.select option', function() {
    // 调用你的目标函数
    functionname();
    // 如果需要获取当前点击的option信息，用$(this)即可
    console.log('选中的选项值：', $(this).val());
    console.log('选中的选项文本：', $(this).text());
});

额外建议：优先使用select的change事件 #

其实对于下拉选择框来说，用户可能通过键盘切换选项，这时候click事件不会触发。如果你的需求是监听选项被选中的动作，更推荐使用select的change事件，交互逻辑更符合用户习惯：

$(document).on('change', '.select', function() {
    const selectedOpt = $(this).find('option:selected');
    console.log('当前选中的选项：', selectedOpt.val(), selectedOpt.text());
    functionname();
});

内容的提问来源于stack exchange，提问作者Ekrem Üçüncü