如何根据所选选项禁用/启用所有动态创建的下拉列表中的选项

Question

假设我在页面上有一个下拉列表，当用户单击一个按钮以创建更多具有相同选项的下拉列表时，我希望能够启用和禁用页面上所有下拉列表中的选定选项。

<select>
<option value="0">Select</option>
<option value="1">John Smith</option>
<option value="2">Jane Smith</option>
<option value="3">John Doe</option>
</select>    

我知道这个 Jquery 适用于静态下拉列表

$("select").change(function () {
    $("select option[value='" + $(this).data('index') + "']").prop('disabled', false);
    $(this).data('index', this.value);
    $("select option[value='" + this.value + "']:not([value='0'])").prop('disabled', true);
});

但它似乎不适用于动态创建的下拉列表。 只有从第一个下拉列表中选择的选项在其他选项中被禁用，反之则无效

这是我的简化创建代码：

function createRow() {
var table = $('#addTable');

table.append('<select class="ui fluid search dropdown" ><?php foreach ($taskdescriptions as $task) : ?> <option value="<?php echo $task ?>"><?php echo str_replace("|"," ",$task);  ?></option><?php endforeach; ?></select>');
    $("select option[value='" + $(this).data('index') + "']").prop('disabled', false);
    $(this).data('index', this.value);
    $("select option[value='" + this.value + "']:not([value='0'])").prop('disabled', true);


}

我正在创建表行，其中每一行都有一个选择下拉列表和一些其他输入

Answer 1

感谢 Heretic Monkey 和 Nikki9696 解决方法是： $('#addTable').on('change', 'select', function(){}