Блог

Однажды у меня возникла проблема с PHP, и отличный парень решил мою проблему, на этот раз я изучаю JavaScript, и я действительно застрял на проекте.

Вот в чем проблема:https://jsfiddle.net/xasal/8c0kdqm4/5 /

Как вы видите, у меня есть 2 селектора, слева пользователь видит своих персонажей, справа он может выбрать переключение своей «расы», проблема в том, что я хочу, чтобы JavaScript запускал что-то, когда парень выбирает своего персонажа слева для сравнения с правым, и автоматически удалял опцию, если это для той же расы.. Я заставил функции для всех исчезнуть, единственная проблема — это значение сравнения … и когда я думаю, что мой код хорош, у меня возникают проблемы в консоли разработки с неожиданным завершением или синтаксисом

Неперехваченная синтаксическая ошибка: неожиданное завершение ввода

Извините, если для вас это немного просто, я действительно новичок: 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();
  

Попробуйте это вместо этого.

Я вызвал функцию в 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>  

Скрыть параметр, если значение == ‘вариант 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>  

Просто используйте селектор запросов для поиска соответствующего параметра и скройте его. Вот минимальный пример:

 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>