ASPX 选择下拉菜单，按钮链接到另一个页面

Question

我不熟悉选择下拉菜单和链接。如果我有：

<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>

当用户选择他们的选项时，我如何将按钮链接到当用户单击按钮时，它会转到 ASPX 下拉菜单中的选定页面？我确定我需要以某种方式将其绑定到代码隐藏，但我不确定如何执行此操作。

Answer 1

一个非常基本的解决方案类似于下面的 sn-p。在按钮上单击读取选择的值并重定向到该 url。不要忘记将id 添加到select。并且需要在按钮上添加type="button"，否则会触发表单发布。

<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>

Answer 2

无需将其连接到后面的代码。这都可以用一些javascript在客户端处理。

使按钮成为实际链接。然后更新href 属性和可选的文本。

//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="/" id="Link" class="inactive">Go..</a>

如果您在页面上设置了多个 this，也可以将其封装为自动工作。

//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="/" 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="/" class="dropdownLink inactive">Go..</a>
</div>