Identical Select menus list item toggle

Question

I am trying to develop a feature which involves 2 select list items.

Flow goes something like this,

1. There are two list items (identical) with the same list items
2. When I select an option from Main Tags list, the same option in Sub Tags list should get disabled. For example, If I select Tag 1 from the Main Tags list then Tag 1 from the Sub Tags list should get disabled. (Toggle effect: when I select other options from the 1st list, then previously disabled item should b enabled)
3. Sub Tags list is multiple selection. Here selected values gets displad nex to it as a tags with delete tag option on it (Which is working in my code). But When user change the option from Main Tags list and the same thing is already been displayed here as a Selected tags section then it should get removed from selected tags section and Sub Tags list (Which is disable at this point) as well.

Basic idea is not to have same option under both Main Tags and Sub Tags

Hope my question is clear.

Here is my current code,

$(function () {
    $("#tagSel").change(function () {
        $this = $(this);
        $("#tags").append('<span id="' + $this.val() + '"> ' + $this.find('option:selected').text() + ' <a href="#">&times;</a></span>');
        $this.find('option:selected').prop("disabled", true);
    });
    $("#tags").on("click", "span a", function () {
        $("#tagSel option[value='" + $(this).parent().attr("id") + "']").prop('disabled',null);
        $(this).parent().remove();
        $("#tagSel_main").append('<i ></i>')
    });
});

DEMO

Answer 1

I believe that this might do the trick.

I've commented the function to clarify how if functions.

$('#tagSel_main').on('change', function() {
    /* find selected option */
    var selector = $(this).find(':selected').val();
    /* remove the disabled property from the active sub tag (if it exists) */
    $('.activeSubTag').removeClass('activeSubTag').prop('disabled', false );
    /* disable the now selected sub tag and give a class (for the above rule) */
    $('#tagSel option[value='+selector+']').addClass('activeSubTag').prop('disabled', true );
    /* remove the sub tag from "selected sub tags" (if it exists) */
    $('#tags span#'+selector).remove();
});

UPDATED FIDDLE

EDIT

It seemed that IE and Chrome don't allow display:none on an option. Therefor I found [this workaround on SO]](How to hide a <option> in a <select> menu with CSS?).

Code therefor changes to:

 $('#tagSel_main').on('change', function() {
    var selector = $(this).find(':selected').val();
    $('.activeSubTag option').unwrap();
    $('#tagSel option[value='+selector+']').wrap('<span class="activeSubTag" style="display:none"></span>');
    $('#tags span#'+selector).remove();
});

UPDATED FIDDLE

Answer 2

Try to add something like this :

$("#tagSel_main").change(function () {
    var mainSel = $(this);

    $("#tagSel option").prop('disabled',null);
    $( "#" + mainSel.val() ).remove();
    $("#tagSel option[value='" + mainSel.val() + "']").prop("disabled", true);
    $("span").each( function() {
        $("#tagSel option[value='" + $(this).attr("id") + "']").prop("disabled", true);
    })
})

Answer 3

Please find Demo

$(function () {
 $("#tagSel").change(function () {
  $this = $(this);
  $("#tags").append('<span id="' + $this.val() + '"> ' + $this.find('option:selected').text() + ' <a href="#">&times;</a></span>');
  $this.find('option:selected').prop("disabled", true);
 });
 $("#tags").on("click", "span a", function () {
  $("#tagSel option[value='" + $(this).parent().attr("id") + "']").prop('disabled',null);
  $(this).parent().remove();
        $("#tagSel_main").append('<i ></i>')
 });
});

var currentMainTag = $('#tagSel_main').val(); 
$('#tagSel_main').change(function(){
    $('#tagSel option[value="'+currentMainTag+'"]').prop("disabled", false);
    currentMainTag = $(this).val(); 
    var textSe = $(this).find('option:selected').text();

 $('#tagSel option[value="'+currentMainTag+'"]').prop("disabled", true);
});

* {  font-family: 'Segoe UI';  font-size: 10pt;}
body > div{  display:inline-block; width:20%; vertical-align:top ;  height:100px;  background-color: bisque;  padding: 10px;}
.sub_tags{display:inline-block; width:60%;     background-color: bisque; padding: 10px;}
.sub_tags > div {width:40%; display:inline-block; vertical-align:top}
.tags {   display:inline-block;   width:100%}
.tags p {  margin: 0;}
.tags span {
  display: inline-block;
  padding: 3px 9px;
  background: #E4E4E4;
  border: solid 1px #A0A054;
  border-radius: 5px;
  margin:5px 
}
.tags span a {
  color: red;
  text-decoration: none;
  background-color: white;
  padding: 2px 5px;
  border-radius: 16px;
  font-size: 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><span>Main Tag:</span><br/>
<select id="tagSel_main">
  <option value="tag1">Tag 1</option>
  <option value="tag2">Tag 2</option>
  <option value="tag3">Tag 3</option>
  <option value="tag4">Tag 4</option>
  <option value="tag5">Tag 5</option>
</select>
</div>

<div class="sub_tags">
<div>
<span>Sub Tag:</span><br/>
<select id="tagSel" multiple>
  <option value="tag1">Tag 1</option>
  <option value="tag2">Tag 2</option>
  <option value="tag3">Tag 3</option>
  <option value="tag4">Tag 4</option>
  <option value="tag5">Tag 5</option>
</select>
</div>

<div>
    Selected Sub Tags:<br/>
<div class="tags">
  <p id="tags"></p>
</div>
</div>
</div>

Answer 4

Simply Add This Changes

$("#tagSel_main").change(function () {
    $("#tagSel option").each(function(){
    if($this.val()==$(this).val()){
     $(this).prop("disabled", true);
     }else{
     $(this).prop("disabled", false);
}}); 

See Fiddler Update

https://jsfiddle.net/kubkzytz/