Javascript：在下拉菜单中设置默认变量

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' 事件时发生。因此，如果他们对 San Diego 作为他们的第一选择感到满意，他们将不会触发 onchange 事件。我应该只在函数之外声明 event_location = 'sandiego' 吗？

另一个棘手的部分是基于他们选择的 event_location（圣地亚哥、洛杉矶或旧金山），我的 javascript 会更改他们被定向到的 URL。如何更改 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;

这将获取下拉菜单中的任何值。因此，您不必担心具有 2 个不同函数的变量范围，您可以在 1 个“OnClick”事件中声明所有变量。

Answer 1

在回答您问题的第一部分时，您可以更改为使用附加到表单元素的 onsubmit，而不是使用附加到 select 元素的 onchange，这样，无论变量是否具有，都将被填充已更改：

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

您能否将问题的第二部分澄清为一个实际问题 - 我不确定您目前在问什么。

编辑：

两件事可能会使您的问题的第二部分更容易：

1. 如果没有其他依赖项，则将下拉列表中每个选择项的“值”设置为您要发送此人的 URL。这样您就可以简单地从选择值中读取 URL 并将它们直接发送到那里，而无需使用 case 语句进行翻译。

2. 尝试使用 switch 语句而不是级联 if/else，这样更易​​于阅读和调试。您还可以通过将操作（即 window.open）移动到 switch 语句的底部并仅使用每个 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 中。