如何在选择下拉plaeholder时禁用onClick事件？

Question

我尝试了各种方法来阻止选择任一占位符时发生 onClick 事件，但无法使其正常工作。这是我到目前为止所拥有的：

    <div class="choosesign">
  <div class="zodiacs">
    <select id="zodiac-me" class="zodiac-me" name="zodiac1">
        <option value="none">Your Sign</option>
        <option value="1">Aries</option>
        <option value="2">Aquarius</option>
        <option value="3">Cancer</option>
        <option value="4">Capricorn</option>
        <option value="5">Gemini</option>
        <option value="6">Leo</option>
        <option value="7">Libra</option>
        <option value="8">Pisces</option>
        <option value="9">Sagittarius</option>
        <option value="10">Scorpio</option>
        <option value="11">Taurus</option>
        <option value="12">Virgo</option>
    </select>
</div>
<div class="zodiacs">
    <select id="zodiac-them" class="zodiac-them" name="zodiac2">
        <option value="none">Their Sign</option>
        <option value="1">Aries</option>
        <option value="2">Aquarius</option>
        <option value="3">Cancer</option>
        <option value="4">Capricorn</option>
        <option value="5">Gemini</option>
        <option value="6">Leo</option>
        <option value="7">Libra</option>
        <option value="8">Pisces</option>
        <option value="9">Sagittarius</option>
        <option value="10">Scorpio</option>
        <option value="11">Taurus</option>
        <option value="12">Virgo</option>
    </select>
</div>
<div class="zodiacs" id="gobutton">
<a id="zodiacchoice" href="#" onclick='GotoLink()'> <h1>
  GO</h1> </a>
</div>
</div>

<script>function GotoLink(){
  var sel = $('.zodiac-me option:selected').text();
    var sel2 = $('.zodiac-them option:selected').text();
    if (sel=='Your Sign') {
    document.getElementById("zodiacchoice").disabled = true;
  } else {
    document.getElementById("zodiacchoice").href = '/' + sel + '/' + sel + '-vs-' + sel2;
  }
}</script>

我尝试使用 if 语句进行澄清，但 onClick 并未禁用。该链接仍然可以正常工作。

Answer 1

您可以使用

.val()

来获取所选值。

value

中的属性

<option>

是字符串，使用

sel === 'none'

。

使用

javascript:void(0)

禁用

<a>

function GotoLink() {
  var sel = $('#zodiac-me').val();
  var sel2 = $('#zodiac-them').val();
  if (sel === 'none' || sel2 === 'none') {
    document.getElementById("zodiacchoice").href = 'javascript:void(0)';
  } else {
    document.getElementById("zodiacchoice").href = '/' + sel + '/' + sel + '-vs-' + sel2;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="choosesign">
  <div class="zodiacs">
    <select id="zodiac-me" class="zodiac-me" name="zodiac1">
      <option value="none">Your Sign</option>
      <option value="Aries">Aries</option>
      <option value="Aquarius">Aquarius</option>
      <option value="Cancer">Cancer</option>
      <option value="Capricorn">Capricorn</option>
      <option value="Gemini">Gemini</option>
      <option value="Leo">Leo</option>
      <option value="Libra">Libra</option>
      <option value="Pisces">Pisces</option>
      <option value="Sagittarius">Sagittarius</option>
      <option value="Scorpio">Scorpio</option>
      <option value="Taurus">Taurus</option>
      <option value="Virgo">Virgo</option>
    </select>
  </div>
  <div class="zodiacs">
    <select id="zodiac-them" class="zodiac-them" name="zodiac2">
      <option value="none">Their Sign</option>
      <option value="Aries">Aries</option>
      <option value="Aquarius">Aquarius</option>
      <option value="Cancer">Cancer</option>
      <option value="Capricorn">Capricorn</option>
      <option value="Gemini">Gemini</option>
      <option value="Leo">Leo</option>
      <option value="Libra">Libra</option>
      <option value="Pisces">Pisces</option>
      <option value="Sagittarius">Sagittarius</option>
      <option value="Scorpio">Scorpio</option>
      <option value="Taurus">Taurus</option>
      <option value="Virgo">Virgo</option>
    </select>
  </div>
  <div class="zodiacs" id="gobutton">
    <a id="zodiacchoice" href="#" onclick='GotoLink()'>
      <h1>GO</h1>
    </a>
  </div>
</div>