Multiple Dropdowns With Same Options: How to Remove Currently Selected Item of One Dropdown from Other Dropdowns

var previousOption = null;$('select').on('change', function(){  const selectedOption = $(this).find('option:selected').val();  $(`[value="${previousOption}"]:disabled`).attr('disabled', false);  previousOption = null;  $(`[value="${selectedOption}"]:not(:selected)`).attr('disabled', true);})$('select').on('click', function(){  previousOption = $(this).find('option:selected').val();});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><select id="select1">  <option selected></option>  <option value="option1">option1</option>  <option value="option2">option2</option>  <option value="option3">option3</option>  <option value="option4">option4</option>  <option value="option5">option5</option></select><select id="select2">  <option selected></option>  <option value="option1">option1</option>  <option value="option2">option2</option>  <option value="option3">option3</option>  <option value="option4">option4</option>  <option value="option5">option5</option></select><select id="select3">  <option selected></option>  <option value="option1">option1</option>  <option value="option2">option2</option>  <option value="option3">option3</option>  <option value="option4">option4</option>  <option value="option5">option5</option></select><select id="select4">  <option selected></option>  <option value="option1">option1</option>  <option value="option2">option2</option>  <option value="option3">option3</option>  <option value="option4">option4</option>  <option value="option5">option5</option></select>

Removing an option from all other chosen multiple dropdowns, when selected on a particular dropdown

By calling the function below on the select box change event the options will be disabled/enabled as per your requirements.

function disableSelectedValues() {
    var cssOptions = [];
    $(".input_field.criteria_countries option").removeAttr("disabled");
    $.each($(".input_field.criteria_countries"), function(index, select) {
        cssOptions = [];
        var values = $(select).val();
        if (values) {
            for (var i = 0; i < values.length; i++) {
                cssOptions.push("option[value=" + values[i] + "]");
            }
        }
        console.log("test");
        if (cssOptions.length) {
            // disable all options with the selected values
            $(".input_field.criteria_countries " 
+ cssOptions.join(",.input_field.criteria_countries ")).attr("disabled", true);

            // enable all options with the selected values for the current select
            $(select).find(cssOptions.join()).removeAttr("disabled");
        }
    });
}

With .chosen you can listen to onchange events with .chosen().change();.
In the .chosen().change() event you then need to tell all of the select boxes to update once a value has changed. By using .trigger("chosen:updated"); on the select box selectors whenever a change event is fired, the select boxes will update.

NOTE that you will need to call the disableSelectedValues() function whenever you add a select box to have its options disabled on creation.

http://jsfiddle.net/p0b4j5o8/22/

select one element from dropdown remove from other dropdowns JQuery

I hope this approach can give you some ideas:

1- Add a class to each select so that you can get an array of all them.

2- Add a change event to the elements that contain the class: whenever they change, iterate over the array and remove the option that contains the selected text. In order to prevent erasing options from the select that triggered the event or previous ones (as I think, is your intention) put a guard (startRemoving) that prevents erasing anything from any select previous to the one that triggered the event.

var $combo = $(".combo");
$combo.on("change", function () {
    var select = this,
        selected = $("option:selected", this).text(),
        startRemoving = false;

    $combo.each(function (_, el) {
        if (el === select) {
            startRemoving = true;
            return;
        }

        if (startRemoving) {
            $("option", el).each(function (_, el) {
                var $el = $(el);
                if ($el.text() === selected) {
                    $el.remove();
                }
            });
        }
    });
});

It's only an idea. You can see it working in this fiddle

UPDATE

If you want changes to get reflected always, just remove the guard and just check that you're not updating the element that triggered the event (the behaviour is a bit weird though):

var $combo = $(".combo");
$combo.on("change", function () {
    var select = this,
        selected = $("option:selected", this).text();

    $combo.each(function (_, el) {
        if (el !== select) {
            $("option", el).each(function (_, el) {
                var $el = $(el);
                if ($el.text() === selected) {
                    $el.remove();
                }
            });
        }
    });
});

fiddle

Add (one below the other) and remove drop down lists (select element) inside javascript function

I added the elements - the select item and two buttons to a div element.
To make the select elements appear below, I set the style to 'block'.

selectList.style.display = 'block';

And to remove the select item, I added this line:

div.lastChild?.remove();

inside RemoveSelect()

I put it inside an if condition so that the first three items in div (the first select item and the two buttons) are not deleted.

var div = document.createElement("list");
            
        var sel = document.createElement('select');
            setOptions(sel);
        div.appendChild(sel);
        var add_btn = document.createElement("BUTTON"); 
        add_btn.innerHTML = "Add Item"; 
       add_btn.addEventListener("click", AddSelect);
           div.appendChild(add_btn);

        var rem_btn = document.createElement("BUTTON");
        rem_btn.innerHTML = "Remove Item"; 
        rem_btn.addEventListener("click", RemoveSelect);
        div.appendChild(rem_btn);

       col.appendChild(div);
        

       function AddSelect() 
       {
              
              var selectList = document.createElement('select');
              selectList.id = 'mySelect';
              selectList.style.display = 'block';
              setOptions(selectList);

              div.appendChild(selectList);
       }

       function RemoveSelect() 
           {
         
        var x = div.childElementCount;
        if(x>3)
            {
         
             div.lastChild?.remove();
        }
       }
    
       

Disable Multiple Specific Options in Select Lists that have same class name

Your problem is this line:

    $(".person-select option").prop("disabled", false);

It is undoing previously-disabled options when you select from the next drop down. Then, you disable only the options with the name value in the selected drop down, effectively undoing previous drop-down selection disabling.

What you should do is check ALL of the drop downs when one is clicked, undo disable on all, and then re-disable all options based on currently-selected names from all drop downs. So this:

    // Get value of Person Select on change
$(".person-select").change(function() {

    //Select all drop downs
    var all_selects = $(".person-select");
    $(".person-select option").prop("disabled", false); //Activate all, but we will redisable appropriate ones next.

    //Recurse. Look at each drop down, and then compare against all drop downs that exist.
    for(var x = 0; x < all_selects.length; x++) {

        //Get selected name from each drop down, and then compare it against all drop downs, so that we can disable an option with the same value in other dropdowns.
        var currentSelection = $(all_selects[x]).prop("id");
        for(var y = 0; y < all_selects.length; y++) {

           //Ignore self. We do not want to disable the option with the above currentSelection value within that dropwdown, as it will prevent form submission of the selected value.
           if(currentSelection == $(all_selects[y]).prop("id")) continue;

           //Now, disable duplicate options in OTHER drop downs.
           var selectedPerson = $(all_selects[x]).val();
           if (selectedPerson !== "") {

               $(all_selects[y]).find("option[value='" + selectedPerson + "']").attr("disabled","disabled");

           }

        }

    }

});

Multiple dropdowns with no duplicate value

If you want to simply disable an option whose value is present in the items array of objects (which you are using for the v-model directive binding, so it reflects a "live" set of user-selected choices), then it is a matter of using a method to return a disabled state:

<option v-for="(option) in options" :value="option.value" v-bind:disabled="isDisabled(option)">{{option.name}}</option>

Then, you can define a isDisabled(option) method which returns a boolean to indicate if a given option's value is already present in your array:

isDisabled: function(option) {
    return this.items.map(item => item.value).includes(option.value);
}

See proof-of-example below:

var app = new Vue({

  el: "#app",
  data: {
    options: [],
    items: [],
    selectedValueArray: [],

  },
  mounted() {
    this.options = [{
        name: "Option 1",
        value: 1,
      },
      {
        name: "Option 2",
        value: 2,
      },
      {
        name: "Option 3",
        value: 3,
      },
      {
        name: "Option 4",
        value: 4,
      },
      {
        name: "Option 5",
        value: 5,
      },
      {
        name: "Option 6",
        value: 6,
      }
    ];
  },

  methods: {
    addItem: function() {
      this.items.push({
        'value': 0
      });

    },

    removeItem: function(index) {
      this.$delete(this.items, index);

    },
    
    isDisabled: function(option) {
      return this.items.map(item => item.value).includes(option.value);
    }

  },

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="(item, index) in items">
    <select v-model="item.value">
      <option v-for="(option) in options" :value="option.value" v-bind:disabled="isDisabled(option)">{{option.name}}</option>
    </select>
    <button @click="removeItem(index)">Remove this item</button>
  </div>
  <button @click="addItem">Add new item</button>
</div>