如何利用下拉的onchange事件进行跳转

今天文汇软件小编来和大家分享一个前端下拉框的小技巧。

大家都知道在前端的控件中,select是没有办法控制的,像是在select里面添加元素也是根本不可能的事情。有些人会选择采用div模拟,但是代码量太大,小编不敢苟同。不过小编,意外发现了select的onchange事件,可以通过onchange事件和windows.location.href()或者windows.open(),话不多说,上代码。

1.jpg

        <div class="link">

            <select name="" id="" onchange="javascript:window.open(this.options[this.selectedIndex].value)">

              {list action=navigator type=4 pid=0}

          <option value="{$t.url}">- {$t.name} -</option>

          {/list}

        </select>

      </div>

通过点击下拉中当前select的value来打开页面

另外,这里要注意以下,这里使用的是onchange事件而不是onclick事件,因为onclick事件是说只要点击了就会跳转,但是之后就没有办法执行里面的值,页面就会一直刷新,而onchange是指select的value值改变了之后跳转指定链接。

好了,今天小编为大家分享的,如果大家觉得小编的分享很实用的话就来文汇软件来关注小编吧。

关键词:
返回列表

相关文章

相关案例