CODEWITHSUNDEEP
javascriptjqueryhtml
Gauraang Manchanda
Gauraang Manchanda

Reputation: 13

Dropdown Options remove from other dropdowns

I need to remove some options from the 2nd dropdown menu based on the first. I have tried quite a few iterations to get it done but still it is not working. Kindly provide with solutions In the below code I need to remove the option from the 2nd dropdown already selected in the 1st one. I have tried the mentioned HTML & Javascript Code

HTML

<form>
        Source:
        <select id = "box1" name="a">
            <option>select</option>
            <option value="Apple">Apple</option>
            <option value="Banana">Banana</option>
            <option value="Carrot">Carrot</option>
        </select>   

        Destination:
        <select id="box2" name="b">
            <option>select</option>
            <option value="Apple">Apple</option>
            <option value="Mango">Mango</option>
            <option value="Dice">Dice</option>
            <option value="Carrot">Carrot</option>
         </select>
    </form>

JAVASCRIPT

    var main = function(){
       $("#box1").change(function(){
       var a = $('#box1 option:selected').val();
       $("#box2 option[value='a']").remove();
       });
    }
    $(document).ready(main);

I have tried entering the value as variable a with and without quotes but no effect. Although when i replaced 'a' with a specific value like 'Apple', then the code is working.

Upvotes: 0

Views: 137

Answers (4)

Anand Chandwani
Anand Chandwani

Reputation: 124

$('#box1').change(function(){
  var v = $(this).val();
  $('#box2').find("option[value="+v+"]").remove(); });

Try this simple one

Upvotes: 0

Kedar Holkunde
Kedar Holkunde

Reputation: 1

hide().siblings().show() instead of.remove()`

The .remove() permanently removes the selected option in box1 from box2. so if you use .hide() and .show(), it would hide and show. try making these changes.

Upvotes: 0

RRR
RRR

Reputation: 1082

Hi kindly check https://jsfiddle.net/RRR0308/uubuumrz/1/

HTML

<select id="box1">
  <option>111</option>
  <option>222</option>
  <option>333</option>
  <option>444</option>
</select>

<select id="box2">
  <option>999</option>
  <option>222</option>
  <option>888</option>
  <option>444</option>
</select>

jQuery

$(document).ready(function(){
    $('#box1').on('change', function(){

    var x=$(this).val();

    $('#box2 option').each(function(){
        if($(this).val()==x){
        $(this).remove();

      }
    });
  });
});

Upvotes: 0

Seyed Morteza Hosseini
Seyed Morteza Hosseini

Reputation: 402

I think this is your answer ;)

var main = function(){
  $("#box1").change(function(){
    var a = $('#box1 option:selected').val();
    $("#box2 option[value="+a+"]").hide().siblings().show();
  });
}
$(document).ready(main);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="box1" name="b">
  <option>select</option>
  <option value="Apple">Apple</option>
  <option value="Mango">Mango</option>
  <option value="Dice">Dice</option>
  <option value="Carrot">Carrot</option>
</select>
<select id="box2" name="b">
  <option>select</option>
  <option value="Apple">Apple</option>
  <option value="Mango">Mango</option>
  <option value="Dice">Dice</option>
  <option value="Carrot">Carrot</option>
</select>

Upvotes: 1

Related Questions