Onchange open URL via select - jQuery

Question

What would be the best way to attach an event so on change of a select option a URL  Store the href in an attr and grab it on change

User · Answer

JS Fiddle Example      userNav   change function     window location       selected  this  attr  href            lt select id  userNav  gt   lt option gt  lt  option gt   lt option href  http   google com  gt Goolge lt  option gt   lt option href  http   duckduckgo com  gt Go Go duck lt  option gt   lt  select gt    This works for the href in an option that is selected

User · Answer

If you don t want the url to put it on option s value  i ll give u example     lt select class  abc  gt       lt option value  0  href  hello  gt Hell lt  option gt       lt option value  1  href  dello  gt Dell lt  option gt       lt option value  2  href  cello  gt Cell lt  option gt   lt  select gt          select   bind  change  function            alert     selected  this  attr  href

User · Answer

I believe the simplest way to redefine a location inside select tab is as follows    lt select onchange  location   this value   gt        lt option value  https   www google com   gt Home lt  option gt        lt option value  https   www bing com  gt Contact lt  option gt        lt option value  mypets php  gt Sitemap lt  option gt   lt  select gt

User · Answer

You can use this simple code snippet using jQuery to redirect from a drop down menu    lt select id  dynamic-select  gt       lt option value    selected gt Pick a Website lt  option gt       lt option value  http   www google com   gt Google lt  option gt       lt option value  http   www youtube com   gt YouTube lt  option gt       lt option value  http   www stackoverflow com   gt Stack Overflow lt  option gt   lt  select gt    lt script gt          dynamic-select   bind  change   function         bind change event to select         var url     this  val       get selected value         if  url             require a URL             window location   url     redirect                   return false           lt  script gt

User · Answer

Another way        lt script type  text javascript  gt          function change url val                window location val                 lt  script gt                   lt select style  width 130px   onchange  change url this value    gt               lt option value  http   www url1 com  gt Option 1 lt  option gt               lt option value  http   www url2 com  gt Option 2 lt  option gt        lt  select gt

User · Answer

lt select name  xx  class  xxx  onchange   name this options this selectedIndex  value this options this selectedIndex  getAttribute  rel     gt     lt option value  x  rel  xy  gt aa lt  option gt     lt option value  xxx  rel  xyy  gt bb lt  option gt   lt  select gt      for javascript function  name value rel    alert value  -  rel

User · Answer

redirect on change option with jquery       lt select id  selectnav1  class  selectnav  gt               lt option value     gt Menu  lt  option gt               lt option value     https   www google com  gt              Google              lt  option gt               lt option value  http   stackoverflow com   gt                stackoverflow              lt  option gt             lt  select gt    lt script type  text javascript  gt       function                   selectnav1   change  function           location href     this  val                   lt  script gt

User · Answer

Sorry  but there s to much coding going on here      I ll give the simplest one to you for free  I invented it back in 2005  although the javascript source now says it was their staff who came up with it - more than a year later   Anyway  here it is  no javascript       lt  -- Paste this code into the BODY section of your HTML document  -- gt   lt select size  1  name  jumpit  onchange  document location href this value  gt    lt option selected value    gt Make a Selection lt  option gt   lt option value  http   www javascriptsource com   gt The JavaScript Source lt  option gt   lt option value  http   www javascript com  gt JavaScript com lt  option gt   lt option value  http   www webdeveloper com forum forumdisplay php f 3  gt JavaScript Forums lt  option gt   lt option value  http   www scriptsearch com   gt Script Search lt  option gt   lt option value  http   www webreference com programming javascript diaries   gt The JavaScript Diaries lt  option gt   lt  select gt     Just type in any URL you like  or a relative URL  to the pages location on server   it will always work

User · Answer

It is pretty simple  let s see a working example    lt select id  dynamic select  gt     lt option value    selected gt Pick a Website lt  option gt     lt option value  http   www google com  gt Google lt  option gt     lt option value  http   www youtube com  gt YouTube lt  option gt     lt option value  https   www gurustop net  gt GuruStop NET lt  option gt   lt  select gt    lt script gt        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                     lt  script gt     x000D   x000D    function     x000D       bind change event to select x000D        dynamic select   on  change   function     x000D      var url     this  val       get selected value x000D      if  url       require a URL x000D        window location   url     redirect x000D        x000D      return false  x000D        x000D      x000D   lt select id  dynamic select  gt  x000D     lt option value    selected gt Pick a Website lt  option gt  x000D     lt option value  http   www google com  gt Google lt  option gt  x000D     lt option value  http   www youtube com  gt YouTube lt  option gt  x000D     lt option value  https   www gurustop net  gt GuruStop NET lt  option gt  x000D   lt  select gt  x000D   x000D   x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  x000D           gt  lt  script gt  x000D   x000D   x000D       Remarks    The question specifies jQuery already  So  I m keeping other alternatives out of this  In older versions of jQuery   lt  1 7   you may want to replace on with bind  This is extracted from JavaScript tips in Meligy   s Web Developers Newsletter

User · Answer

Try this code its working perfect     lt script gt    function              submit   hide             page-changer select   change function             window location       page-changer select option selected   val                 lt  script gt    lt  php     if  isset   POST  nav                header  Location    POST nav             gt   lt form id  page-changer  action    method  post  gt       lt select name  nav  gt           lt option value    gt Go to page    lt  option gt           lt option value  http   css-tricks com   gt CSS-Tricks lt  option gt           lt option value  http   digwp com   gt Digging Into WordPress lt  option gt           lt option value  http   quotesondesign com   gt Quotes on Design lt  option gt       lt  select gt       lt input type  submit  value  Go  id  submit    gt   lt  form gt

User · Answer

Here s how i d do it   lt select id  urlSelect  onchange  window location   jQuery   urlSelect option selected   val     gt    lt option value  http   www yadayadayada com  gt Great Site lt  option gt    lt option value  http   www stackoverflow com  gt Better Site lt  option gt   lt  select gt

User · Answer

Try this code its working Firefox  Chrome  IE   lt select onchange  this options this selectedIndex  value  amp  amp   window location   this options this selectedIndex  value    gt   lt option value    selected gt ---Select--- lt  option gt   lt option value  https   www google com  gt Google lt  option gt   lt option value  https   www google com  gt Google lt  option gt   lt option value  https   www google com  gt Google lt  option gt   lt option value  https   www google com  gt Google lt  option gt

User · Answer

I think this is the simplest way    lt select onchange  if  this value  window location href this value  gt       lt option value    gt Pick one  lt  option gt       lt option value   foo  gt Foo lt  option gt       lt option value   bar  gt Bar lt  option gt   lt  select gt

User · Answer

Super easy way is as following  No need to create a function     lt select onchange  window location   this options this selectedIndex  value  gt       lt option value    gt Switch Language lt  option gt       lt option value     url   en       gt English lt  option gt       lt option value     url   ps       gt      lt  option gt       lt option value     url   fa       gt     lt  option gt   lt  select gt

[jquery] Onchange open URL via select - jQuery

Examples related to jquery

Examples related to onchange