什么是附加事件的最佳方式,以便在更改 Select 选项时添加URL.将HREF存储在Atr中,然后在更改时获取它?

推荐答案

It is pretty simple, let's see a working example:

<select id="dynamic_select">
  <option value="" selected>Pick a Website</option>
  <option value="http://www.google.com">Google</option>
  <option value="http://www.youtube.com">YouTube</option>
  <option value="https://www.gurustop.net">GuruStop.NET</option>
</select>

<script>
    $(function(){
      // bind change event to select
      $('#dynamic_select').on('change', function () {
          var url = $(this).val(); // get selected value
          if (url) { // require a URL
              window.location = url; // redirect
          }
          return false;
      });
    });
</script>

$(function() {
  // bind change event to select
  $('#dynamic_select').on('change', function() {
    var url = $(this).val(); // get selected value
    if (url) { // require a URL
      window.location = url; // redirect
    }
    return false;
  });
});
<select id="dynamic_select">
  <option value="" selected>Pick a Website</option>
  <option value="http://www.google.com">Google</option>
  <option value="http://www.youtube.com">YouTube</option>
  <option value="https://www.gurustop.net">GuruStop.NET</option>
</select>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"
        ></script>

.

comments :

  • The question specifies jQuery already. So, I'm keeping other alternatives out of this.
  • In older versions of jQuery (< 1.7), you may want to replace on with bind.
  • 这是从Meligy’s Web Developers Newsletter中的JavaScript提示中摘录的.

.

Jquery相关问答推荐

将搜索面板和服务器端与POST AJAX请求一起使用时出现DataTables错误

如何根据另一个 radio Select 并切换?

如何使用 JQuery 将详细信息中的项目包装在容器中?

javascript 捕获浏览器快捷方式 (ctrl+t/n/w)

在正则表达式字符括号中包含连字符?

Ajax 替换而不是追加

扩展 jQuery 插件的最佳方式

JQuery 数据 Select 器不使用 .data 更新

moment.js isValid 函数无法正常工作

如何更改 dropzone.js 中的默认文本?

使用 jQuery 拖放防止单击事件

jQuery 插件:添加回调功能

为什么不推荐$().ready(handler)?

停止输入/书写后如何触发输入文本中的事件?

使用 JQuery 激活 bootstrap 选项卡

如何使用 javascript (jquery) 将整数值添加到返回字符串的值中?

IE8 和 JQuery 的 trim()

通过 AJAX MVC 下载 Excel 文件

为什么要使用发布/订阅模式(在 JS/jQuery 中)?

使用 Ajax 下载并打开 PDF 文件