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

社区的stackof您好，有一天我遇到PHP问题，一个超级家伙解决了我的问题，这次我学习JavaScript，我真的被困在一个项目中，所以我需要一些帮助，我相信像您这样的专家会很快找到的，哈哈

这是小提琴：

如你所见，我有两个选择器，在左边，用户看到他的角色，在右边，他可以选择切换他的种族，问题是我希望JavaScript在这个家伙选择左边的角色与右边的角色进行比较时运行一些东西，如果是同一种族的话，会自动删除该选项。。我使所有函数都消失了，唯一的问题是比较值。。。当我认为我的代码很好时，我在开发控制台中遇到了意想不到的结尾或语法问题

未捕获的语法错误：输入意外结束

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

如果值=‘选项3’，则隐藏选项

选择1 选择2 选项3在chnage上隐藏 选择4 备选案文5 $'selectName'。在'change'上，函数{ 如果$this.val==“选项3”{ $'option[value=option 3]'，this.hide； }否则{ $'option[value=option 3]'，this.show； } }.触发“改变”；； 如果值=‘选项3’，则隐藏选项

选择1 选择2 选项3在chnage上隐藏 选择4 备选案文5 $'selectName'。在'change'上，函数{ 如果$this.val==“选项3”{ $'option[value=option 3]'，this.hide； }否则{ $'option[value=option 3]'，this.show； } }.触发“改变”；； 试试这个

我调用了左选择框的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();

工作演示

功能选择{ var selectedtitem=$.leftSelect.findoption:selected.val.toLowerCase； var oplen=$.rightSelect option.length； $.rightSelect option.show； 因为i=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();

工作演示

功能选择{ var selectedtitem=$.leftSelect.findoption:selected.val.toLowerCase； var oplen=$.rightSelect option.length； $.rightSelect option.show；

---

对于i=1；i只需使用查询选择器查找匹配选项并将其隐藏。下面是一个简单的示例：

var charSelect=document.querySelector'select[name=charSelection]； var jobSelect=document.querySelector'select[name=jobSelection]； charSelect.addEventListener'change'，函数{ //取消隐藏任何隐藏的选项 jobSelect.querySelectorAll'option'.forEachopt=>opt.style.display=null； //隐藏与上述所选选项匹配的选项 var value=this.value.toLowerCase； jobSelect.querySelector`option[value=${value}]`.style.display=none； }; 骑士 夜影 流氓 泰坦 骑士 治疗者 法师 流氓 巫师 夜影

---

只需使用查询选择器查找匹配选项并将其隐藏。以下是一个简单的示例：

var charSelect=document.querySelector'select[name=charSelection]； var jobSelect=document.querySelector'select[name=jobSelection]； charSelect.addEventListener'change'，函数{ //取消隐藏任何隐藏的选项 jobSelect.querySelectorAll'option'.forEachopt=>opt.style.display=null； //隐藏与上述所选选项匹配的选项 var value=this.value.toLowerCase； jobSelect.querySelector`option[value=${value}]`.style.display=none； }; 骑士 夜影 流氓 泰坦 骑士 治疗者 法师 流氓 巫师 夜影

---

我一个接一个地在代码中添加所有描述。如果有任何疑问，请评论我。天哪，非常感谢您对代码的评论，它对我来说非常有价值。谢谢您的努力，顺便说一句，它工作得非常好！so+I+=选项内的任何字符串：n子项？：是的，它从选项长度的1中获取I值。这就是它获取所有选项。我添加所有描述一个接一个地输入代码。如果有任何疑问，请评论我。天哪，非常感谢您对代码的评论，它对我来说非常有价值。谢谢您的努力，顺便说一句，它工作得非常好！so+i+=选项n中的任何字符串？：是的，它从1到选项长度获得i值。这就是它获得所有选项。欢迎使用stackoverflow，Anton.T这是一个很好的第一个问题。如果你觉得答案有用，别忘了接受。干杯。@r3wt非常感谢你的福利！：D欢迎来到stackoverflow，Anton。这是一个很好的第一个问题。如果你觉得有帮助，别忘了接受答案。干杯。@r3wt非常感谢你的福利！：非常感谢！谢谢这不是我想要的，但它可以在未来帮助我。谢谢你的回答：有趣的是！谢谢你，这不是我想要的，但它可以在未来帮助我。谢谢你的回答。谢谢你的回答，我们真的很有用

---

LH，唯一的问题是，当页面加载并预选selected=selected Gooffy the knight时，用户可以看到knight，但无论何时切换都可以：我今天学到了很多，谢谢你的帮助！谢谢你的回答，它工作得很好，唯一的问题是，当页面加载并预选selected=selected Gooffy the knight时，用户可以看到knight，但无论何时切换都可以：我今天学到了很多谢谢你的帮助！