发表新帖
发表新帖

Redirect on select option in select box

前端 未结
关注
6 2225
既然无缘
既然无缘 2020-11-29 02:41

At the moment I am using this:
提交评论
  •  加载中...
  • 陌清茗
    2020-11-29 02:55

    to make it as globally reuse function using jquery

    HTML

    <select class="select_location">
   <option value="http://localhost.com/app/page1.html">Page 1</option>
   <option value="http://localhost.com/app/page2.html">Page 2</option>
   <option value="http://localhost.com/app/page3.html">Page 3</option>
</select>

    Javascript using jquery

    $('.select_location').on('change', function(){
   window.location = $(this).val();
});

    now you will able to reuse this function by adding .select_location class to any Select element class

    0 讨论(0)
  • 走了就别回头了
    2020-11-29 02:57

    For someone who doesn't want to use inline JS.

    <select data-select-name>
    <option value="">Select...</option>
    <option value="http://google.com">Google</option>
    <option value="http://yahoo.com">Yahoo</option>
</select>

    <script type="text/javascript">
    document.addEventListener('DOMContentLoaded',function() {
        document.querySelector('select[data-select-name]').onchange=changeEventHandler;
    },false);

    function changeEventHandler(event) {
        window.location.href = this.options[this.selectedIndex].value;
    }
</script>
    0 讨论(0)
  • 迷失自我
    2020-11-29 03:02

    I'd strongly suggest moving away from inline JavaScript, to something like the following:

    function redirect(goto){
    var conf = confirm("Are you sure you want to go elswhere?");
    if (conf && goto != '') {
        window.location = goto;
    }
}

var selectEl = document.getElementById('redirectSelect');

selectEl.onchange = function(){
    var goto = this.value;
    redirect(goto);

};

    JS Fiddle demo (404 linkrot victim).
    JS Fiddle demo via Wayback Machine.
    Forked JS Fiddle for current users.

    In the mark-up in the JS Fiddle the first option has no value assigned, so clicking it shouldn't trigger the function to do anything, and since it's the default value clicking the select and then selecting that first default option won't trigger the change event anyway.

    Update:
    The latest example's (2017-08-09) redirect URLs required swapping out due to errors regarding mixed content between JS Fiddle and both domains, as well as both domains requiring 'sameorigin' for framed content. - Albert

    0 讨论(0)
  • 攒了一身酷
    2020-11-29 03:08

    Because the first option is already selected, the change event is never fired. Add an empty value as the first one and check for empty in the location assignment.

    Here's an example:

    https://jsfiddle.net/bL5sq/

    <select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
  <option value="">Select...</option>
  <option value="https://google.com">Google</option>
  <option value="https://yahoo.com">Yahoo</option>
</select>

    0 讨论(0)
  • 误落风尘
    2020-11-29 03:13

    This can be archived by adding code on the onchange event of the select control.

    For Example:

    <select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
    <option value=""></option>
    <option value="http://google.com">Google</option>
    <option value="http://gmail.com">Gmail</option>
    <option value="http://youtube.com">Youtube</option>
</select>
    0 讨论(0)
    •  看不清?
    提交回复
    热议问题