ASPX Select 带有按钮链接到另一个页面的下拉菜单

Question

我不熟悉 select 下拉菜单和 link。如果我有：

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

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

Answer 1

一个非常基本的解决方案类似于下面的代码片段。在按钮上单击读取 select 的值并重定向到 url。不要忘记在 select 中添加 id。并且需要在按钮上加上type="button"，否则会触发一个表单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>

Answer 2

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

来处理

使按钮成为实际按钮 link。然后更新 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>

如果页面上有多个这样的设置，也可以将其封装为自动工作。

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

ASPX Select 带有按钮链接到另一个页面的下拉菜单

ASPX Select dropdown with Button Linking to another page

asp.net

aspxgridview