Enabled Disabled Select option based on previous dropdown? - html

Question

i have 2 dropdown, lets say select 1 and select 2, the scenario is
when user select dropdown on select 1 and choose A, so on select 2, option A will be disabled.
Here is my code, actually this is working,
but i have a condition when user will edit the dropdown, on select 1 user already choose A but select 2 still not selected, what i want is the option A in select 2 must be disabled, but currently it still enable
jsfiddle https://jsfiddle.net/q3mu7x2w/
$("#pr_bundling").change(function(){
$("#pr_cross").find("option").each(function(){
$(this).removeAttr("disabled");
});
$("#pr_cross [value=" + $(this).val() + "]").attr("disabled","disabled");
$('#pr_cross').not(this).has('option[value="'+ this.value + '"]:selected').val('noselect29');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>select 1</h3>
<select class="form-control" id="pr_bundling">
<option value='noselect99' selected >Select</option>
<option value="A" selected>A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<br>
<h3>select 2</h3>
<select class="form-control" id="pr_cross">
<option value='noselect29' selected >Select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>

Answer 1

You can ensure that the initial selection from #pr_bundling is disabled on page load by moving your update code into a function and calling that on $(document).ready (either directly or via .trigger).
function update_select() {
let selected = $('#pr_bundling').val();
$("#pr_cross").find("option").each(function() {
$(this).removeAttr("disabled");
});
$("#pr_cross [value=" + selected + "]").attr("disabled", "disabled");
}
$(document).ready(function() {
$("#pr_bundling").change(update_select);
update_select();
// or you can trigger the change handler:
// $("#pr_bundling").trigger('change');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>select 1</h3>
<select class="form-control" id="pr_bundling">
<option value='noselect99' selected>Select</option>
<option value="A" selected>A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<br>
<h3>select 2</h3>
<select class="form-control" id="pr_cross">
<option value='noselect29' selected>Select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>

Answer 2

The selector is wrong while disabling the value of select 2.
$("#pr_cross option[value=" + $(this).val() + "]").attr("disabled","disabled");
jsfiddle: https://jsfiddle.net/bs7h0got/