如何将下拉列表的弹窗跳转改为新标签页打开？

I totally get the frustration with Safari blocking those popups—users just think the dropdown is broken! Let's adjust your code to open links in a new tab instead, which won't trigger browser popup blockers and is more intuitive for users.

Key Changes to Make: #

• Force the link to open in a new tab using the '_blank' parameter in window.open()
• Add a check to skip the disabled default option (so we don't try to open a blank/invalid URL)
• Include noopener and noreferrer for security best practices (prevents the new tab from accessing your page's context)

Modified Code: #

<div class="classddown2">
  <select name="class-schedule-dropdown2" id="class-schedule-dropdown2" style="width: 1100px; color: #000000;">
    <option style='color: #000000' selected="selected" disabled="disabled">Select Class Schedule</option>
    <option style='color: #000000' value="http://www.example.com">example 1</option>
  </select>
  <script type="text/javascript">
    var urlmenu = document.getElementById('class-schedule-dropdown2');
    urlmenu.onchange = function() {
      const selectedUrl = this.options[this.selectedIndex].value;
      // Skip the disabled default option
      if (selectedUrl && !this.options[this.selectedIndex].disabled) {
        // Open in new tab with security attributes
        window.open(selectedUrl, '_blank', 'noopener,noreferrer');
      }
    };
  </script>
</div>

Why This Works: #

• Using '_blank' tells the browser to open the link in a new tab instead of a popup window, which most browsers (including Safari) won't block because it's a standard user-initiated navigation.
• The check for the disabled option ensures we don't run unnecessary code when the user selects the placeholder option.
• noopener and noreferrer are important security additions—they prevent the new tab from having access to your page's window.opener object, which closes potential security loopholes.

If you have more options to add later, this code will work seamlessly for all of them as long as the value attribute contains valid URLs.

内容的提问来源于stack exchange，提问作者Xuezheng Low