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

问题描述

您好，stackof社区，有一天我遇到了一个PHP问题，一个超级人解决了我的问题，这一次我学习JavaScript，而且我真的陷入了一个项目，所以我需要一些帮助，我很确定像您这样的专家很快就会发现大声笑！

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

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

未捕获的SyntaxError：输入意外结束

抱歉，这对您来说很简单，我真的很新：x

感谢您勇于帮助我的人！ ：D

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

解决方法

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

,

试试看。

我在左侧选择框的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>

,

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

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>