Issue
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>
Solution
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>
Answered By - Nick
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.