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

Question

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

这是fiddle：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

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>

Answer 2

试试这个。

我调用了左 select 框的 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 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>

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

Hide an option element if a matching value is selected

html

javascript

css

jquery

option