Javascript：在下拉菜單中設置默認變量（在OP中解決）

Question

2問題，我有一個列出3個位置的表單。提交表單後，我希望變量「event_location」等於在下拉菜單中選擇的位置。我唯一不明白的是，如果用戶根本沒有選擇一個位置，那麼用戶只是使用默認位置（顯示的第一個位置）。我不認爲我的JavaScript代碼解釋了這一點。下面我已經包含了html和javascript。我感謝任何幫助！

<select name="location" id="event_location" onchange='getSelectedValue();'> 
<option value="sandiego">San Diego</option> 
<option value="losangeles">Los Angeles</option> 
<option value="sanfrancisco">San Francisco</option> 
</select> 

function getSelectedValue() { 

var event_location = document.getElementById('event_location').value; 


} 

函數getSelectedValue（）僅在'onchange'事件觸發時發生。因此，如果他們對聖地亞哥的第一選擇感到滿意，他們將不會觸發onchange事件。我應該在函數之外聲明event_location ='sandiego'嗎？

另一個棘手的部分是基於他們選擇哪個event_location（聖迭戈，洛杉磯或者舊金山），我的javascript改變了它們被導向到的URL。如何更改網址以說明他們挑選哪個event_location。例如，如果他們選擇聖地亞哥，一旦他們點擊搜索按鈕，它會將他們帶到：http://myurl.com/sandiego。這裏是HTML和JavaScript我至今對我的第二個功能：

<input type='button' value='Search' onclick='eventViewer();' /> 

function eventViewer() { 
    function getSelectedValue() { 
     var event_location = document.getElementById('event_location').value; 
     } 

    if (event_location = 'losangeles') { 
     window.open('http://...') 
     } 
    else if (event_location = 'sanfrancisco') { 
     window.open('http://...') 
     } 
    else { 
     window.open('http://...') //link to san diego 
     } 
    } 

而不是創建2個獨立的功能，你可以使用標準

var event_location = document.getElementById('event_location').value; 

這隻會抓住從下拉框中的值抓取下拉菜單中的任何值。因此，您不必擔心具有兩種不同功能的變量範圍，您可以在1次'OnClick'事件時聲明所有變量。

Answer 1

在回答你的問題的第一部分，而不是使用附加到select元素的onchange，你可以改變使用onsubmit附加到表單元素，這樣，變量將被填充，無論是否它已改爲：

<form action='/process_form' onsubmit="getSelectedValue();"> 
... 
</form> 

你能澄清你問題的第二部分爲實際的問題 - 我不知道你在此刻問。

編輯：

兩件事可能會讓你的問題更容易第二部分：

1. 如果沒有其他依賴則使各選擇項的「價值」的下拉列表中您想要將該人發送到的URL。這樣，您可以簡單地從選擇值中讀取URL並直接發送，而無需使用case語句進行翻譯。

2. 嘗試使用switch語句而不是級聯if/else，它更易於閱讀和調試。還可以減少代碼量，並通過移動動作（即window.open）到switch語句的底部，並使用每個只切換到設置變量改善其清晰度：

例如

switch(event_location) 
{ 
    case "san_francisco": 
    var url = 'http://sanfrancisco.com' 
    break; 
    case "san_diego": 
    url = 'http://sandiego.com' 
    break; 
    default: 
    alert('please choose a city') 
} 
url ? window.open(url) : null; 

Answer 2

function eventViewer() 
    var event_location = document.getElementById('event_location').value;      

   if (event_location = 'losangeles') { 
          window.open('http://...') 
    } else if (event_location = 'sanfrancisco') { 
     window.open('http://...') 
    } else { 
     window.open('http://...') //link to san diego 
    } 
} 

通常你會使用服務器端代碼（PHP，asp.net，JAVA，...）來存儲用戶選擇，但如果這不是一個選項，只需通過javascript將它保存在cookie中即可。