1

I have two multi select drop downs both has the same set of values in it.

If you select one option in first drop down, the same should get disabled in second drop down.

I am able to do it for the first option but not for the subsequent options.

Kindly help

<h4>Subject to </h4> <br>
                    <div class="form-group">
                        <label for="carrier">Charges * </label>
                        <select placeholder="Choose " class="form-control chosen-select" tabindex="2" name="subject_to[]" id="subject_to_id" width="40%"multiple>
                        <!-- chosen-select -->
                            <option value=""></option>  
                            <option value="CURRENCY" id="sub_opt1">CURRENCY</option>
                            <option value="BUNKER" id="sub_opt2">BUNKER</option>
                            <option value="LOW SULFUR" id="sub_opt3">LOW SULFUR</option>
                            <option value="CANAL" id="sub_opt4">CANAL</option>
                            <option value="GULF" id="sub_opt5">GULF</option>
                            <option value="PIRACY" id="sub_opt6">PIRACY</option>
                            <option value="WAR RISK" id="sub_opt7">WAR RISK</option>
                            <option value="CONGESTION" id="sub_opt8">CONGESTION</option>
                            <option value="PEAK SEASON" id="sub_opt9">PEAK SEASON</option>
                            <option value="RATE INCREASE" id="sub_opt10">RATE INCREASE</option>
                            <option value="EMERGENCY" id="sub_opt11">EMERGENCY</option>
                            <option value="WINTER" id="sub_opt1">WINTER</option>
                            <option value="DRAFT LIMITATION" id="sub_opt12">DRAFT LIMITATION</option>
                            <option value="OTHER" id="sub_opt13">OTHER</option>
                            <option value="TERMINAL HANDLING" id="sub_opt14">TERMINAL HANDLING</option>
                            <option value="BOOKING" id="sub_opt15">BOOKING</option>
                            <option value="DOCUMENTATION" id="sub_opt16">DOCUMENTATION</option>
                            <option value="TELEX" id="sub_opt17">TELEX</option>
                            <option value="EXPORT DECLARATION (ENS, AMS, etc.)" id="sub_opt18">EXPORT DECLARATION (ENS, AMS, etc.)</option>
                            <option value="PORT CHARGE" id="sub_opt19">PORT CHARGE</option>
                            <option value="SECURITY" id="sub_opt20">SECURITY</option>
                            <option value="SEAL" id="sub_opt21">SEAL</option>
                            <option value="CONTAINER INSPECTION" id="sub_opt22">CONTAINER INSPECTION</option>
                            <option value="CONTAINER WEIGHTING" id="sub_opt23">CONTAINER WEIGHTING</option>
                            <option value="CIC/EBS" id="sub_opt24">CIC/EBS</option>
                        </select>
                    </div>

                </div>
                <div class="col-md-4">
                <h4> Inclusive </h4> <br>
                    <div class="form-group">
                        <label for="inclusive"> Charges * </label>
                        <select placeholder="" class="form-control" tabindex="2" id="inclusive_id" name="inclusive[]" multiple>
                            <!-- chosen-select -->
                            <option value=""></option>  
                            <option value="CURRENCY" id="inc_opt1">CURRENCY</option>
                            <option value="BUNKER" id="inc_opt2">BUNKER</option>
                            <option value="LOW SULFUR" id="inc_opt3">LOW SULFUR</option>
                            <option value="CANAL" id="inc_opt4">CANAL</option>
                            <option value="GULF" id="inc_opt5">GULF</option>
                            <option value="PIRACY" id="inc_opt6">PIRACY</option>
                            <option value="WAR RISK" id="inc_opt7">WAR RISK</option>
                            <option value="CONGESTION" id="inc_opt8">CONGESTION</option>
                            <option value="PEAK SEASON" id="inc_opt9">PEAK SEASON</option>
                            <option value="RATE INCREASE" id="inc_opt10">RATE INCREASE</option>
                            <option value="EMERGENCY" id="inc_opt11">EMERGENCY</option>
                            <option value="WINTER" id="inc_opt1">WINTER</option>
                            <option value="DRAFT LIMITATION" id="inc_opt12">DRAFT LIMITATION</option>
                            <option value="OTHER" id="inc_opt13">OTHER</option>
                            <option value="TERMINAL HANDLING" id="inc_opt14">TERMINAL HANDLING</option>
                            <option value="BOOKING" id="inc_opt15">BOOKING</option>
                            <option value="DOCUMENTATION" id="inc_opt16">DOCUMENTATION</option>
                            <option value="TELEX" id="inc_opt17">TELEX</option>
                            <option value="EXPORT DECLARATION (ENS, AMS, etc.)" id="inc_opt18">EXPORT DECLARATION (ENS, AMS, etc.)</option>
                            <option value="PORT CHARGE" id="inc_opt19">PORT CHARGE</option>
                            <option value="SECURITY" id="inc_opt20">SECURITY</option>
                            <option value="SEAL" id="inc_opt21">SEAL</option>
                            <option value="CONTAINER INSPECTION" id="inc_opt22">CONTAINER INSPECTION</option>
                            <option value="CONTAINER WEIGHTING" id="inc_opt23">CONTAINER WEIGHTING</option>
                            <option value="CIC/EBS" id="inc_opt24">CIC/EBS</option>
                        </select>
                    </div>



    $('#subject_to_id').on('change', function (e) {
        var optionSelected = $("option:selected", this);
        var idSelected = this.value;

        var idSelected = $(this).children(":selected").attr("id");
        var str = idSelected;

        //alert(str + " "+str.length)

        var inc_id = "#inc_"+str.substring(4, str.length);

        //alert(inc_id);
        $(inc_id).attr("disabled","disabled");

});
Improve this question
2
  • Provide a jsfiddle with the code you have tried Commented Mar 18, 2017 at 5:12
  • it works when I try it.. jsfiddle.net/456puc9k Commented Mar 18, 2017 at 5:13

3 Answers 3

Reset to default
1

This is can be accomplished through relative selectors. I use an option click event for this. Then I grab the other form group and modify it. It works both ways, meaning if you select from select A then select B will be modified and vice versa. 

$("option").click(function () {
    $otherFormGroup = $(".form-group").not(
         $(this)
            .parents(".form-group:first")
    ); //grabs the other form group
    $otherFormGroup.find("option").attr("disabled", false); //resets all other banned items
    $otherFormGroup.find("option[value='"+$(this).attr("value")+"']")
        .attr("disabled",true); //disabled selected item in the other select area
});
<!-- Modified HTML to only demostrate content better in snippet, you can leave your HTML as is. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Subject To:
<br><br>
<div class="form-group  form-group0">
   <label for="carrier">Charges * </label>
   <select placeholder="Choose " class="form-control chosen-select" tabindex="2" name="subject_to[]" id="subject_to_id" width="40%"multiple>
      <!-- chosen-select -->
      <option value=""></option>
      <option value="CURRENCY" id="sub_opt1">CURRENCY</option>
      <option value="BUNKER" id="sub_opt2">BUNKER</option>
      <option value="LOW SULFUR" id="sub_opt3">LOW SULFUR</option>
      <option value="CANAL" id="sub_opt4">CANAL</option>
      <option value="GULF" id="sub_opt5">GULF</option>
      <option value="PIRACY" id="sub_opt6">PIRACY</option>
      <option value="WAR RISK" id="sub_opt7">WAR RISK</option>
      <option value="CONGESTION" id="sub_opt8">CONGESTION</option>
      <option value="PEAK SEASON" id="sub_opt9">PEAK SEASON</option>
      <option value="RATE INCREASE" id="sub_opt10">RATE INCREASE</option>
      <option value="EMERGENCY" id="sub_opt11">EMERGENCY</option>
      <option value="WINTER" id="sub_opt1">WINTER</option>
      <option value="DRAFT LIMITATION" id="sub_opt12">DRAFT LIMITATION</option>
      <option value="OTHER" id="sub_opt13">OTHER</option>
      <option value="TERMINAL HANDLING" id="sub_opt14">TERMINAL HANDLING</option>
      <option value="BOOKING" id="sub_opt15">BOOKING</option>
      <option value="DOCUMENTATION" id="sub_opt16">DOCUMENTATION</option>
      <option value="TELEX" id="sub_opt17">TELEX</option>
      <option value="EXPORT DECLARATION (ENS, AMS, etc.)" id="sub_opt18">EXPORT DECLARATION (ENS, AMS, etc.)</option>
      <option value="PORT CHARGE" id="sub_opt19">PORT CHARGE</option>
      <option value="SECURITY" id="sub_opt20">SECURITY</option>
      <option value="SEAL" id="sub_opt21">SEAL</option>
      <option value="CONTAINER INSPECTION" id="sub_opt22">CONTAINER INSPECTION</option>
      <option value="CONTAINER WEIGHTING" id="sub_opt23">CONTAINER WEIGHTING</option>
      <option value="CIC/EBS" id="sub_opt24">CIC/EBS</option>
   </select>
</div>

From:
<br><br>
<div class="form-group form-group1">
   <label for="carrier">Charges * </label>
   <select placeholder="Choose " class="form-control chosen-select" tabindex="2" name="subject_to[]" id="subject_to_id" width="40%"multiple>
      <!-- chosen-select -->
      <option value=""></option>
      <option value="CURRENCY" id="sub_opt1">CURRENCY</option>
      <option value="BUNKER" id="sub_opt2">BUNKER</option>
      <option value="LOW SULFUR" id="sub_opt3">LOW SULFUR</option>
      <option value="CANAL" id="sub_opt4">CANAL</option>
      <option value="GULF" id="sub_opt5">GULF</option>
      <option value="PIRACY" id="sub_opt6">PIRACY</option>
      <option value="WAR RISK" id="sub_opt7">WAR RISK</option>
      <option value="CONGESTION" id="sub_opt8">CONGESTION</option>
      <option value="PEAK SEASON" id="sub_opt9">PEAK SEASON</option>
      <option value="RATE INCREASE" id="sub_opt10">RATE INCREASE</option>
      <option value="EMERGENCY" id="sub_opt11">EMERGENCY</option>
      <option value="WINTER" id="sub_opt1">WINTER</option>
      <option value="DRAFT LIMITATION" id="sub_opt12">DRAFT LIMITATION</option>
      <option value="OTHER" id="sub_opt13">OTHER</option>
      <option value="TERMINAL HANDLING" id="sub_opt14">TERMINAL HANDLING</option>
      <option value="BOOKING" id="sub_opt15">BOOKING</option>
      <option value="DOCUMENTATION" id="sub_opt16">DOCUMENTATION</option>
      <option value="TELEX" id="sub_opt17">TELEX</option>
      <option value="EXPORT DECLARATION (ENS, AMS, etc.)" id="sub_opt18">EXPORT DECLARATION (ENS, AMS, etc.)</option>
      <option value="PORT CHARGE" id="sub_opt19">PORT CHARGE</option>
      <option value="SECURITY" id="sub_opt20">SECURITY</option>
      <option value="SEAL" id="sub_opt21">SEAL</option>
      <option value="CONTAINER INSPECTION" id="sub_opt22">CONTAINER INSPECTION</option>
      <option value="CONTAINER WEIGHTING" id="sub_opt23">CONTAINER WEIGHTING</option>
      <option value="CIC/EBS" id="sub_opt24">CIC/EBS</option>
   </select>
</div>

Just a heads up, the post by hardik prajapati does not properly reset the options after you try it a couple times.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

The previous answers don't work for multiple selections, I have modified the code to match multiple selections

$(".form-group:first option").click(function () {
    var selecteds = $('option:selected', $(this).parent());
    $secondFormGroup = $(".form-group:eq(1)");
    $secondFormGroup.find("option").attr("disabled", false);
    selecteds.each(function (i, el) {
    		var id = this.id.substr(7);
        $('#inc_opt' + id).attr('disabled', true);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Subject to </h4> <br>
                    <div class="form-group">
                        <label for="carrier">Charges * </label>
                        <select placeholder="Choose " class="form-control chosen-select" tabindex="2" name="subject_to[]" id="subject_to_id" width="40%"multiple>
                        <!-- chosen-select -->
                            <option value=""></option>  
                            <option value="CURRENCY" id="sub_opt1">CURRENCY</option>
                            <option value="BUNKER" id="sub_opt2">BUNKER</option>
                            <option value="LOW SULFUR" id="sub_opt3">LOW SULFUR</option>
                            <option value="CANAL" id="sub_opt4">CANAL</option>
                            <option value="GULF" id="sub_opt5">GULF</option>
                            <option value="PIRACY" id="sub_opt6">PIRACY</option>
                            <option value="WAR RISK" id="sub_opt7">WAR RISK</option>
                            <option value="CONGESTION" id="sub_opt8">CONGESTION</option>
                            <option value="PEAK SEASON" id="sub_opt9">PEAK SEASON</option>
                            <option value="RATE INCREASE" id="sub_opt10">RATE INCREASE</option>
                            <option value="EMERGENCY" id="sub_opt11">EMERGENCY</option>
                            <option value="WINTER" id="sub_opt1">WINTER</option>
                            <option value="DRAFT LIMITATION" id="sub_opt12">DRAFT LIMITATION</option>
                            <option value="OTHER" id="sub_opt13">OTHER</option>
                            <option value="TERMINAL HANDLING" id="sub_opt14">TERMINAL HANDLING</option>
                            <option value="BOOKING" id="sub_opt15">BOOKING</option>
                            <option value="DOCUMENTATION" id="sub_opt16">DOCUMENTATION</option>
                            <option value="TELEX" id="sub_opt17">TELEX</option>
                            <option value="EXPORT DECLARATION (ENS, AMS, etc.)" id="sub_opt18">EXPORT DECLARATION (ENS, AMS, etc.)</option>
                            <option value="PORT CHARGE" id="sub_opt19">PORT CHARGE</option>
                            <option value="SECURITY" id="sub_opt20">SECURITY</option>
                            <option value="SEAL" id="sub_opt21">SEAL</option>
                            <option value="CONTAINER INSPECTION" id="sub_opt22">CONTAINER INSPECTION</option>
                            <option value="CONTAINER WEIGHTING" id="sub_opt23">CONTAINER WEIGHTING</option>
                            <option value="CIC/EBS" id="sub_opt24">CIC/EBS</option>
                        </select>
                    </div>

                </div>
                <div class="col-md-4">
                <h4> Inclusive </h4> <br>
                    <div class="form-group">
                        <label for="inclusive"> Charges * </label>
                        <select placeholder="" class="form-control" tabindex="2" id="inclusive_id" name="inclusive[]" multiple>
                            <!-- chosen-select -->
                            <option value=""></option>  
                            <option value="CURRENCY" id="inc_opt1">CURRENCY</option>
                            <option value="BUNKER" id="inc_opt2">BUNKER</option>
                            <option value="LOW SULFUR" id="inc_opt3">LOW SULFUR</option>
                            <option value="CANAL" id="inc_opt4">CANAL</option>
                            <option value="GULF" id="inc_opt5">GULF</option>
                            <option value="PIRACY" id="inc_opt6">PIRACY</option>
                            <option value="WAR RISK" id="inc_opt7">WAR RISK</option>
                            <option value="CONGESTION" id="inc_opt8">CONGESTION</option>
                            <option value="PEAK SEASON" id="inc_opt9">PEAK SEASON</option>
                            <option value="RATE INCREASE" id="inc_opt10">RATE INCREASE</option>
                            <option value="EMERGENCY" id="inc_opt11">EMERGENCY</option>
                            <option value="WINTER" id="inc_opt1">WINTER</option>
                            <option value="DRAFT LIMITATION" id="inc_opt12">DRAFT LIMITATION</option>
                            <option value="OTHER" id="inc_opt13">OTHER</option>
                            <option value="TERMINAL HANDLING" id="inc_opt14">TERMINAL HANDLING</option>
                            <option value="BOOKING" id="inc_opt15">BOOKING</option>
                            <option value="DOCUMENTATION" id="inc_opt16">DOCUMENTATION</option>
                            <option value="TELEX" id="inc_opt17">TELEX</option>
                            <option value="EXPORT DECLARATION (ENS, AMS, etc.)" id="inc_opt18">EXPORT DECLARATION (ENS, AMS, etc.)</option>
                            <option value="PORT CHARGE" id="inc_opt19">PORT CHARGE</option>
                            <option value="SECURITY" id="inc_opt20">SECURITY</option>
                            <option value="SEAL" id="inc_opt21">SEAL</option>
                            <option value="CONTAINER INSPECTION" id="inc_opt22">CONTAINER INSPECTION</option>
                            <option value="CONTAINER WEIGHTING" id="inc_opt23">CONTAINER WEIGHTING</option>
                            <option value="CIC/EBS" id="inc_opt24">CIC/EBS</option>
                        </select>
                    </div>

Improve this answer

1 Comment

This is very helpful. Great support. Thanks a lot!
0

In both the select the Id value is same in CURRENCY and WINTER I have changed it, and in script putted the inc_id object in function.

$('#subject_to_id').on('change', function (e) {
      var optionSelected = $("option:selected", this);
      var idSelected = this.value;

      var idSelected = $(this).children(":selected").attr("id");
      var str = idSelected;

      //alert(str + " "+str.length)

      var inc_id = "#inc_" + str.substring(4, str.length);

      //alert(inc_id);
      $(inc_id).attr("disabled", "disabled");

   });
<script src="https://code.jquery.com/jquery-1.11.3.js"></script> 
<div class="col-md-4">
   <h4>Subject to </h4> <br>
   <div class="form-group">
      <label for="carrier">Charges * </label>
      <select class="form-control chosen-select" tabindex="2" name="subject_to[]" id="subject_to_id" multiple >
         <!-- chosen-select -->
         <option value=""></option>  
         <option value="CURRENCY" id="sub_opt1">CURRENCY</option>
         <option value="BUNKER" id="sub_opt2">BUNKER</option>
         <option value="LOW SULFUR" id="sub_opt3">LOW SULFUR</option>
         <option value="CANAL" id="sub_opt4">CANAL</option>
         <option value="GULF" id="sub_opt5">GULF</option>
         <option value="PIRACY" id="sub_opt6">PIRACY</option>
         <option value="WAR RISK" id="sub_opt7">WAR RISK</option>
         <option value="CONGESTION" id="sub_opt8">CONGESTION</option>
         <option value="PEAK SEASON" id="sub_opt9">PEAK SEASON</option>
         <option value="RATE INCREASE" id="sub_opt10">RATE INCREASE</option>
         <option value="EMERGENCY" id="sub_opt11">EMERGENCY</option>
         <option value="WINTER" id="sub_opt12">WINTER</option>
         <option value="DRAFT LIMITATION" id="sub_opt13">DRAFT LIMITATION</option>
         <option value="OTHER" id="sub_opt14">OTHER</option>
         <option value="TERMINAL HANDLING" id="sub_opt15">TERMINAL HANDLING</option>
         <option value="BOOKING" id="sub_opt16">BOOKING</option>
         <option value="DOCUMENTATION" id="sub_opt17">DOCUMENTATION</option>
         <option value="TELEX" id="sub_opt18">TELEX</option>
         <option value="EXPORT DECLARATION (ENS, AMS, etc.)" id="sub_opt19">EXPORT DECLARATION (ENS, AMS, etc.)</option>
         <option value="PORT CHARGE" id="sub_opt20">PORT CHARGE</option>
         <option value="SECURITY" id="sub_opt21">SECURITY</option>
         <option value="SEAL" id="sub_opt22">SEAL</option>
         <option value="CONTAINER INSPECTION" id="sub_opt23">CONTAINER INSPECTION</option>
         <option value="CONTAINER WEIGHTING" id="sub_opt24">CONTAINER WEIGHTING</option>
         <option value="CIC/EBS" id="sub_opt25">CIC/EBS</option>
      </select>
   </div>
</div>
<div class="col-md-4">        

   <h4> Inclusive </h4> <br>
   <div class="form-group">
      <label for="inclusive"> Charges * </label>
      <select class="form-control" tabindex="2" id="inclusive_id" name="inclusive[]" multiple>
         <!-- chosen-select -->
         <option value=""></option>  
         <option value="CURRENCY" id="inc_opt1">CURRENCY</option>
         <option value="BUNKER" id="inc_opt2">BUNKER</option>
         <option value="LOW SULFUR" id="inc_opt3">LOW SULFUR</option>
         <option value="CANAL" id="inc_opt4">CANAL</option>
         <option value="GULF" id="inc_opt5">GULF</option>
         <option value="PIRACY" id="inc_opt6">PIRACY</option>
         <option value="WAR RISK" id="inc_opt7">WAR RISK</option>
         <option value="CONGESTION" id="inc_opt8">CONGESTION</option>
         <option value="PEAK SEASON" id="inc_opt9">PEAK SEASON</option>
         <option value="RATE INCREASE" id="inc_opt10">RATE INCREASE</option>
         <option value="EMERGENCY" id="inc_opt11">EMERGENCY</option>
         <option value="WINTER" id="inc_opt12">WINTER</option>
         <option value="DRAFT LIMITATION" id="inc_opt13">DRAFT LIMITATION</option>
         <option value="OTHER" id="inc_opt14">OTHER</option>
         <option value="TERMINAL HANDLING" id="inc_opt15">TERMINAL HANDLING</option>
         <option value="BOOKING" id="inc_opt16">BOOKING</option>
         <option value="DOCUMENTATION" id="inc_opt17">DOCUMENTATION</option>
         <option value="TELEX" id="inc_opt18">TELEX</option>
         <option value="EXPORT DECLARATION (ENS, AMS, etc.)" id="inc_opt19">EXPORT DECLARATION (ENS, AMS, etc.)</option>
         <option value="PORT CHARGE" id="inc_opt20">PORT CHARGE</option>
         <option value="SECURITY" id="inc_opt21">SECURITY</option>
         <option value="SEAL" id="inc_opt22">SEAL</option>
         <option value="CONTAINER INSPECTION" id="inc_opt23">CONTAINER INSPECTION</option>
         <option value="CONTAINER WEIGHTING" id="inc_opt24">CONTAINER WEIGHTING</option>
         <option value="CIC/EBS" id="inc_opt25">CIC/EBS</option>
      </select>
   </div>
</div>

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.