How can i disable/enable options in all dynamically created dropdowns based on the selected options

Question

Lets say i have one dropdown on the page, when the user clicks a button to create more dropdowns with the same options, i want to be able to enable and disable the selected options from all of the dropdowns on the page.

<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>    

I know that this Jquery works for static dropdowns

$("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);
});

But it doesn't seem to work for dynamically created dropdowns. Only the selected option from the first dropdown gets disabled in the others, it doesnt work the other way round

Here is my simplified create code:

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);


}

I am creating table rows, where each row has a select dropdown and some other inputs

Answer 1

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