Hide an option element if a matching value is selected

Question

One day I had a problem with PHP and a super guy resolved my problem, this time I learn JavaScript, and I'm really stuck on a project.

Here is the fiddle: https://jsfiddle.net/xasal/8c0kdqm4/5/

As you see, I have 2 selectors, on the left, the user see his characters, at the right, he can chose to switch his "race", the problem is I want JavaScript to run something when the guy selects his character at the left to compare with the right one and automatically delete the option if it's for the same race.. I made the functions for all to disappear, the only problem is the compare value... and when I think my code is nice I have issues in the dev console of unexpected end or syntax

Uncaught SyntaxError: Unexpected end of input

Sorry if it's kinda easy for you I'm really new :x

<select id="charSelect" name="charSelection">
      <option value="Knight" selected="selected"><span id="charName">Gooffy</span> - <span class="charJob" onclick="detectChanges()">Knight</span> - lv.<span id="charLvl">175</span></option>
      <option value="NightShadow"><span>Soul</span> - <span class="charJob" onclick="detectChanges()">NightShadow</span> - lv.<span>175</span></option>
    <option value="Rogue"><span>Veli</span> - <span class="charJob" onclick="detectChanges()">Rogue</span> - lv.<span>175</span></option>
      </select>
    </section>
            <input type="submit" value="Change my class to">
    <section class="rightSelect">
      <select class="jobSelect" name="jobSelection">
      <option value="titan" id="titan" class="charJobChange" selected="selected">Titan</option>
      <option value="knight" id="knight" class="charJobChange">Knight</option>
      <option value="healer" id="healer" class="charJobChange">Healer</option>
      <option value="mage" id="mage" class="charJobChange">Mage</option>
      <option value="rogue" id="rogue" class="charJobChange">Rogue</option>
      <option value="sorcerer" id="sorcerer" class="charJobChange">Sorcerer</option>
      <option value="nightshadow" id="nightshadow" class="charJobChange">NightShadow</option>
      </select>

function removeNS() {  // example with Hide NS = nightshadow
   $('#nightshadow').hide();
   console.log("loaded");
}

function selectedCh(){
  if($("#leftSelect select").find("option:selected").val() == "NightShadow") {
  removeNS();
}
selectedCh();

Answer 1

Try this instead.

I called the function in onchange="selectedCh()" of left select box.

function selectedCh(){

  // to get selected option in left select box in lowercase
  var selectedtitem = $(".leftSelect select").find("option:selected").val().toLowerCase();
  
  // to get total number of options in right select box
  var oplen = $(".rightSelect select option").length;

  // enable all option in right select box
  $(".rightSelect select option").show();

  // Loop for checking the selected option equals to any option in right select box 
  for(i=1;i<=oplen;i++){
    if($(".rightSelect select option:nth-child("+i+")").val() == selectedtitem){

        // to hide if equals in right select box option
        $(".rightSelect select option:nth-child("+i+")").hide();
    }
  }
}

// to check first run the code
selectedCh();

Working demo

function selectedCh(){
  var selectedtitem = $(".leftSelect select").find("option:selected").val().toLowerCase();
  var oplen = $(".rightSelect select option").length;
  $(".rightSelect select option").show();
  for(i=1;i<=oplen;i++){
    if($(".rightSelect select option:nth-child("+i+")").val() == selectedtitem){
        $(".rightSelect select option:nth-child("+i+")").hide();
    }
  }
}
selectedCh();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section class="leftSelect">
  <select id="charSelect" name="charSelection" onchange="selectedCh()">
    <option value="Knight" selected="selected"><span id="charName">Gooffy</span> - <span class="charJob" onclick="detectChanges()">Knight</span> - lv.<span id="charLvl">175</span></option>
    <option value="NightShadow"><span>Soul</span> - <span class="charJob">NightShadow</span> - lv.<span>175</span></option>
    <option value="Rogue"><span>Veli</span> - <span class="charJob" >Rogue</span> - lv.<span>175</span></option>
  </select>
</section>

<section class="rightSelect">
  <select class="jobSelect" name="jobSelection">
    <option value="titan" id="titan" class="charJobChange" selected="selected">Titan</option>
    <option value="knight" id="knight" class="charJobChange">Knight</option>
    <option value="healer" id="healer" class="charJobChange">Healer</option>
    <option value="mage" id="mage" class="charJobChange">Mage</option>
    <option value="rogue" id="rogue" class="charJobChange">Rogue</option>
    <option value="sorcerer" id="sorcerer" class="charJobChange">Sorcerer</option>
    <option value="nightshadow" id="nightshadow" class="charJobChange">NightShadow</option>
  </select>
</section>

Answer 2

Just use a query selector for find the matching option and hide it. Here is a minimal example:

var charSelect = document.querySelector('select[name="charSelection"]');
var jobSelect = document.querySelector('select[name="jobSelection"]');

charSelect.addEventListener('change', function(){
  // Unhide any hidden options
  jobSelect.querySelectorAll('option').forEach(opt=>opt.style.display = null);
  // Hide the option that matches the above selected one
  var value = this.value.toLowerCase();
  jobSelect.querySelector(`option[value="${value}"]`).style.display = "none";
});

<select name="charSelection">
  <option value="Knight" selected="selected">Knight</option>
  <option value="NightShadow">NightShadow</option>
  <option value="Rogue">Rogue</option>
</select>


<select name="jobSelection">
  <option value="titan" selected="selected">Titan</option>
  <option value="knight">Knight</option>
  <option value="healer">Healer</option>
  <option value="mage">Mage</option>
  <option value="rogue">Rogue</option>
  <option value="sorcerer">Sorcerer</option>
  <option value="nightshadow">NightShadow</option>
</select>

Answer 3

Hide option if value == 'option 3'

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="selectName">
    <option value="option 1">Option 1</option>
    <option value="option 2">Option 2</option>
    <option value="option 3">Option 3 (hide on chnage)</option>
    <option value="option 4">Option 4</option>
    <option value="option 5">Option 5</option>
</select>

<script>
    $('#selectName').on('change', function () {
        if ($(this).val() == 'option 3') {
            $('option[value="option 3"]',this).hide();
        } else {
            $('option[value="option 3"]',this).show();
        }
    }).trigger('change');;
</script>