Redirect Automatically When Selecting an Item from a Select Drop-Down List

Redirect automatically when selecting an item from a select drop-down list

You don't need a pre-packaged script for this, just a couple lines of code.

// get your select element and listen for a change event on it
$('#selectEl').change(function() {
  // set the window's location property to the value of the option the user has selected
  window.location = $(this).val();
});

Redirect form to different URL based on select option element

Just use a onchnage Event for select box.

<select id="selectbox" name="" onchange="javascript:location.href = this.value;">
    <option value="https://www.yahoo.com/" selected>Option1</option>
    <option value="https://www.google.co.in/">Option2</option>
    <option value="https://www.gmail.com/">Option3</option>

</select>

And if selected option to be loaded at the page load then add some javascript code

<script type="text/javascript">
    window.onload = function(){
        location.href=document.getElementById("selectbox").value;
    }       
</script>

for jQuery: Remove the onchange event from <select> tag

jQuery(function () {
    // remove the below comment in case you need chnage on document ready
    // location.href=jQuery("#selectbox").val(); 
    jQuery("#selectbox").change(function () {
        location.href = jQuery(this).val();
    })
})

select options from two dropdown lists and after that when a button is clicked it redirect to the URL related to the options

Here I have added my example link for selecting option1 from select1 and based on that you can select option2 from the select2 and then there's the button provided where you can add your navigation code and navigate using router.navigate(['/'])

Automatically redirect on option selected

If I got your question correctly, you want to:

• Last option (having a value of i.e: "some/route") should navigate to that route
• All other options (which value is not empty) should submit the form immediately

If so than this might help:

function checkSelected() {  if (this.value === "some/route") return (window.location = this.value);  if (this.value) this.form.submit();}
const EL_select = document.querySelector("#filter_query");if (EL_select) EL_select.addEventListener("change", checkSelected);

<form>  <select class="form-control" id="filter_query" name="filter_query">    <option selected value="">Please select a type</option>    <option value="aaa">aaa</option>    <option value="bbb">bbb</option>    <option value="etc">etc</option>    <option value="xxx">Create new type...</option>  </select></form>

Redirect on select option in select box

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>

Auto pre-select dropdown value from URL address

So a bunch of little things need to change here for you to get what you want. I'll try to write them all down:

1. You should access localStorage using getItem and setItem like in the localStorage MDN documentation

2. Use an event listener instead of the inline onchange attribute, it's much cleaner.

3. You probably want to use includes instead of indexOf since you are looking for a substring (country) in a string (href), indexOf won't do this for you.

4. I used location.pathname since you really only care about the path, there are better ways to get the exact path parameter you want.

5. No need to use a <form/> as far as I can see from the code you shared.

6. I removed /kategoria-produktu/ from the option's value attribute since its repetitive and just placed it once in the js

7. You should change the value of the select to the city you want as the default selected. You can do this by parsing out the city from the path and setting it as the value attribute on the select

I think that's it, here is an example using those points above.

const PREFIX = "kategoria-produktu";
window.addEventListener('load', function() {
  let countryInStorage = localStorage.getItem("country");

  if (countryInStorage && !location.pathname.includes(countryInStorage)) {
    location.href = `/${PREFIX}/${countryInStorage}`;
  }

  document.getElementById("saleTerm").addEventListener("change", formChanged);
  setDefaultOption();
})

function setDefaultOption() {
  let countryPath = location.pathname.split("/")[2];

  if (countryPath) {
    document.getElementById("saleTerm").value = countryPath;
  }
}

function formChanged() {
  let selectedCountry = this.value;
  if (selectedCountry !== "non-value") {
    if (localStorage) {
      localStorage.setItem("country", selectedCountry);
    }

    if (!location.pathname.includes(selectedCountry)) {
      location.href = `/${PREFIX}/${selectedCountry}`;
    }
  }
}

<select id="saleTerm" name="country">
  <option value="non-value">Select delivery city</option>
  <option value="cadca">Čadca</option>
  <option value="brno">Brno</option>
  <option value="bratislava">Bratislava</option>
</select>

How do you auto-select a select drop-down list with values based on URL parameters on page load?

Since you're dealing with <option>s of a <select> here, you'll need to assign the attribute selected to the chosen one.

Second, since you're dealing with <option>s, the attribute is called value instead of val. (That's important if you submit the <form>)

So, your code would be along these lines:

jQuery('.page-enroll select[name="batch"] option[val="' + service + '-' + batch + '"]').attr("selected", true)

Tested on your website :-)

Some other small suggestions: By using location.search you can just read the part after ? (and perhaps save some Regular expression, e.g. by splitting on & and =).

Drop down menu to remember selection and redirect user

I agree with yckart's comment and suggest using localStorage.

The support is pretty good (shown here) and unless you need to support IE7 or less you should be ok.

You can set and retrive data like this:

localStorage.varName = 'bling';
var myVal = localStorage.varName;
// or:
localStorage['a little more flexibility'] = 'bling';

To use this, you could do the following:

<script type="text/javascript">
    if (localStorage && localStorage.country) {
        location = localStorage.country;    
    }

    function formChanged(form) {
        var val = form.options[form.selectedIndex].value;
        if (val !== 'non-value') {
          if (localStorage) {
            localStorage.country = val;
          }
          location = val;
        }
    }
</script>

<FORM NAME="form1">
  <select onchange="formChanged(this);" NAME="country" SIZE="1">
    <OPTION VALUE="non-value">Select Country
    <OPTION VALUE="chile">Chile
    <OPTION VALUE="colombia">Colombia
    <OPTION VALUE="bolivia">Bolivia
  </select>
</FORM>

http://jsfiddle.net/K4Jkc/

An approach that would be a little more conservative would be to compare the value stored in localStorage (if there is one) to options in the select-list before doing the redirect, as shown in this jsFiddle:

http://jsfiddle.net/K4Jkc/1/

how to link to a page with picked item from dropdown

You can do history.push in change handler of react-select. An example:

export default function MyComponent() {
  const [value, setValue] = useState()
  const history = useHistory()

  function handleChange(newValue) {
    setValue(newValue)
    history.push(`/carDetails/${newValue.id}`)
  }

  return (
    <Select
      value={value}
      options={options}
      onChange={handleChange}
    />
  )
}

Simple redirect to URL from select drop down in FACEBOOK iframe

Try {} this.options also your urls are mistyped. http://www.leeds.html should be http://www.leeds.com , not sure if that is related but just wanted to point that out just in case.

---

<form name="cityselect">
    <select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO">
        <option selected="selected">Select One</option>
        <option value="http://www.leeds.com">Leeds</option>
        <option value="http://www.manchester.com">Manchester</option>
    </select>
</form>

---

Parent Frame:

<form name="cityselect">
    <select name="menu" onChange="top.location.href=this.options[this.selectedIndex].value;" value="GO">
        <option selected="selected">Select One</option>
        <option value="http://www.leeds.com">Leeds</option>
        <option value="http://www.manchester.com">Manchester</option>
    </select>
</form>

---

Related Topics