ASPX Select dropdown with Button Linking to another page

I am unfamiliar with select dropdowns and links. If I have:

<select>
    <option value="">Select</option>
    <option value="/Applications.aspx">Applications</option>
    <option value="/EditApplications.aspx">Edit Application</option>
    <option value="/AddApplications.aspx">Add Applications</option>
</select>
<button>Go</button>

When the user selects their option, how do I link the button to when the user clicks the button, it goes to the selected page within the dropdown in ASPX? I am sure I need to bind it somehow to the codebehind but I am not sure how to do this.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

A very basic solution would be something like the snippet below. On the button click read the value of the select and redirect to that url. Don’t forget to add an id to the select. And you need to add type="button" to the button, otherwise it will trigger a form post.

<select id="MySelect">
    <option value="">Select</option>
    <option value="/Applications.aspx">Applications</option>
    <option value="/EditApplications.aspx">Edit Application</option>
    <option value="/AddApplications.aspx">Add Applications</option>
</select>

<button type="button" onclick="GoTOUrl()">Go</button>

<script>
    function GoTOUrl() {
        var url = $('#MySelect').val();
        if (url === '')
            return;

        location.href = url;
    }
</script>

Method 2

No need to wire it up to the code behind. This can all be handled client side with some javascript.

Make the button an actual link. Then update the href attribute and optionally the text.

//Get relevent elements
var linkDropDown = document.getElementById("MySelect");
var link = document.getElementById("Link");

//Wire up event listener to the dropdown
linkDropDown.addEventListener("change", function() {
  var defaultVal = this.options[0].value;
  //Toggle the inactive class based on selected value
  link.classList.toggle("inactive", this.value === defaultVal);
  //Set Href
  link.href = this.value;
  //Set Text using ternary operation
  link.text = this.value === defaultVal ? "Go.." : "Go to " + this.options[this.selectedIndex].text;  
});

.inactive {
  pointer-events: none;
  color: grey;
}

<select id="MySelect">
  <option value="/">Select</option>
  <option value="/Applications.aspx">Applications</option>
  <option value="/EditApplications.aspx">Edit Application</option>
  <option value="/AddApplications.aspx">Add Applications</option>
</select>

<a href="/" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" id="Link" class="inactive">Go..</a>

It is also possible to encapsulate this to automagically work if you have more than set of this on the page.

//Get relevent elements
var dropdowns = document.querySelectorAll(".dropdownSelect");

//Wire up event listeners
for(var i = 0; i < dropdowns.length; i++){
  dropdowns[i].addEventListener("change", function(event){
    if(event.target.nodeName === "SELECT") {
      let sel = event.target;
      let link = this.querySelector(".dropdownLink");
      let defaultVal = sel.options[0].value;
      //Toggle the inactive class based on selected value
      link.classList.toggle("inactive", sel.value === defaultVal);
      //Set HREF
      link.href = sel.value;
      //Set Text using ternary operation
      link.text = sel.value === defaultVal ? "Go.." : "Go to " + sel.options[sel.selectedIndex].text;
    }
  })
}

.inactive {
  pointer-events: none;
  color: grey;
}

<div class="dropdownSelect">
  <select>
    <option value="/">Select</option>
    <option value="/Applications.aspx">Applications</option>
    <option value="/EditApplications.aspx">Edit Application</option>
    <option value="/AddApplications.aspx">Add Applications</option>
  </select>

  <a href="/" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" class="dropdownLink inactive">Go..</a>
</div>
<div class="dropdownSelect">
  <select>
    <option value="/">Select</option>
    <option value="/WebSites.aspx">Web Sites</option>
    <option value="/EditWebSites.aspx">Edit Web Sites</option>
    <option value="/AddWebSites.aspx">Add Websites</option>
  </select>

  <a href="/" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" class="dropdownLink inactive">Go..</a>
</div>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0