javascript - 确认下拉菜单中的特殊值

如果用户更改下拉菜单，则会触发一个JavaScript，该JavaScript调用特定的网址。

仅当新选择的值与之前预先选择的值不同时才发生这种情况（到目前为止有效）。

但是，如果选项值（而不是值本身）为“ 0”，则会出现一个确认消息，询问“您是否真的要调用该URL”。

这只能通过外部功能或onchange内部实现吗？

<select onchange="if (this.value) window.location.href=this.value">
<option value="index.php?include=program&id=93&amp">0</option>
<option value="index.php?include=program&id=23&amp">1</option>
<option value="index.php?include=program&id=87&amp">2</option>
<option value="index.php?include=program&id=55&amp">3</option>
</select>

最佳答案

为什么不只是做一个外部功能？阅读起来会容易得多。就是说，它不一定是必需的，可以将其添加到内联onchange处理程序中。

<select onchange="if(this.selectedIndex==0){ if(confirm('Are you sure?')){ console.log(this.value); } } else { console.log(this.value); }">
  <option value="index.php?include=program&id=93&amp">0</option>
  <option value="index.php?include=program&id=23&amp">1</option>
  <option value="index.php?include=program&id=87&amp">2</option>
  <option value="index.php?include=program&id=55&amp">3</option>
</select>

上面的代码检查所选值的索引，如果它是0（第一项），则运行确认，否则运行标准结果。注意在本示例中，我用window.location.href替换了console.log()，因此您可以在代码段中看到它的运行。我通常不喜欢将具有任何条件的东西放入内联处理程序中，因为它们很难维护。您可以将相同的内容放入函数中并将该函数放置在主.js文件中。

<select onchange="changeLocationOnSelect(this,event);">
  <option value="index.php?include=program&id=93&amp">0</option>
  <option value="index.php?include=program&id=23&amp">1</option>
  <option value="index.php?include=program&id=87&amp">2</option>
  <option value="index.php?include=program&id=55&amp">3</option>
</select>

<script>
  function changeLocationOnSelect(el,e){
    if( el.selectedIndex == 0 ){
      if( confirm( 'Are you sure?' ) ){
        console.log(el.value);
      }
    } else {
      console.log(el.value);
    }
  }
</script>