-1

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>
aynber
  • 22,380
  • 8
  • 50
  • 63
ezles88
  • 159
  • 1
  • 12
  • Does this answer your question? [Disable options based on previous selects](https://stackoverflow.com/questions/24909907/disable-options-based-on-previous-selects) – Always Helping Aug 24 '20 at 07:29
  • What are you trying to achieve with `$('#pr_cross').not(this).has('option[value="'+ this.value + '"]:selected').val('noselect29');`? – Nick Aug 24 '20 at 07:29
  • if user change anything on select 1, the select 2 will be reset – ezles88 Aug 24 '20 at 07:33
  • i have a condition when user want to edit, user already choose A on select 1, so on select 2 option A will be disabled, the link above still doesnt answer, because when i choose Milk as selected, in the select 2 milk still enable – ezles88 Aug 24 '20 at 07:35
  • @ezles88 `milk` is **not** enabled => https://jsfiddle.net/e9zwm0cj/ => its the solution from that duplicate – Always Helping Aug 24 '20 at 08:01

2 Answers2

2

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>
Nick
  • 138,499
  • 22
  • 57
  • 95
0

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/

thinktwice
  • 131
  • 12