如果选择了匹配值，则隐藏选项元素

Question

有一天我遇到了一个 PHP 问题，一个大佬解决了我的问题，这次我学习了 JavaScript，我真的被一个项目卡住了。

这里是小提琴：https://jsfiddle.net/xasal/8c0kdqm4/5/

如你所见，我有 2 个选择器，在左边，用户可以看到他的角色，在右边，他可以选择切换他的“种族”，问题是我希望 JavaScript 在这个人选择他的时候运行一些东西左侧的字符与右侧的字符进行比较，如果是同一种族，则自动删除该选项。我使所有人的功能都消失了，唯一的问题是比较值...当我认为我的代码很好时我在开发控制台中遇到意外结束或语法问题

Uncaught SyntaxError: Unexpected end of input

对不起，如果这对你来说有点简单，我真的是新人：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

试试这个。

我调用了左侧选择框onchange="selectedCh()"中的函数。

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();

工作演示

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

如果 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>

Answer 3

只需使用查询选择器来查找匹配选项并将其隐藏。这是一个最小的例子：

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>