動態更新<a href link..> when <SELECTED> value is changed

-1

enter image description here I am working on my school application using jsp and web-development is new to me. At this moment I am stumbled upon the issue:動態更新<a href link..> when <SELECTED> value is changed

The process should be this:

I have a Dropdown box with multiple values. For example:

Room: 111 | Building: ACC | Capacity: 15

Room: 111 | Building: ACD | Capacity: 25

Room: 151 | Building: ACC | Capacity: 11

Room: 113 | Building: ACC | Capacity: 15

When user selects ANY option nothing should happen.

Next to the dropdown box, I have a <a href link..> which sais "see the chart".

When user presses "see the chart" the following process should take place:

String in selected box should be separated and Room# and Bulding# must be extracted into separate strings
new windowshould open with this link: room_chart.jsp?room=111&building=ACC (for example)

I know how to split the string and do it in general, but I don't know how to dynamically do it without reloading the page... I guess I would need to implement the JavaScript?

來源

2012-04-22 Andrew

Call a Javascript function in the anchor's href attribute. In that function use document.getElementById with the select box's id to get the selected string，將其拆分併發送ajax請求或使用window.open（但不是動態的）打開一個新窗口。

<html> 
    <script type="text/javascript"> 
     function view_chart() { 
      var select = document.getElementById("room_select"); 
      var option = select.options.item(select.selectedIndex).value; 
      var tokens = option.split(/[:|]/); 
      var url = "room_chart.jsp?room="+trim(tokens[1])+"&building="+trim(tokens[3]); 
      window.open(url); 
     } 

     function trim(value) { 
      value = value.replace(/^\s+/,''); 
      value = value.replace(/\s+$/,''); 
      return value; 
     } 
    </script> 
    <body> 
     <select id="room_select"> 
      <option>Room: 014 | Building: ACT</option> 
      <option>Room: 005 | Building: ACC</option> 
     </select> 
     <a href="javascript:view_chart()">Show Info</a> 
    </body> 
</html>

來源

2012-04-22 03:19:16 blackcompe

我不是一個投你一票，但我可以說這是非常糟糕的可訪問性。無法看到鏈接所在的位置，無法在新標籤中打開等。 – jpsimons 2012-04-22 03:29:44

我已更新我的答案。 – blackcompe 2012-04-22 04:11:38

猜測「jQuery不夠」ツ聲明：我沒有downvote您的答案http://www.doxdesk.com/img/updates/20091116-so-large.gif http://meta.stackexchange.com /問題/ 45176 /時，是使用 - jQuery的不是一個有效回答到A-JavaScript的問題/ 48195＃48195 – 2012-04-22 04:15:32

您可以使用jQuery，如果多數民衆贊成可能，用更新的URL一個全新元素的基礎上，從村落下選擇替換HREF元素。

來源

2012-04-22 03:34:19

動態更新<a href link..> when <SELECTED> value is changed

回答

相關問題