Раскрывающийся список ASPX Select с кнопкой Ссылка на другую страницу

Я не знаком с выпадающими списками и ссылками. Если у меня есть:

<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? Я уверен, что мне нужно как-то привязать его к отделенному коду, но я не уверен, как это сделать.


asp.net aspxgridview
person Keith    schedule 18.11.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Очень простым решением будет что-то вроде фрагмента ниже. При нажатии кнопки прочитайте значение выбора и перенаправьте на этот 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>
person VDWWD    schedule 18.11.2020
comment
Просто краткое примечание для OP, что для этого требуется библиотека jQuery. - person Jon P; 19.11.2020

arrow_upward
1
arrow_downward

Не нужно подключать его к коду позади. Все это может быть обработано на стороне клиента с помощью некоторого 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>

Также возможно инкапсулировать это для автоматической магической работы, если у вас их больше, чем набор на странице.

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

person Jon P    schedule 18.11.2020