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。如何将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>

你能否将问题的第二部分澄清成一个实际的问题 - 我不确定你现在在问什么。

编辑：

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

如果没有其他依赖项，则在下拉列表中将每个选择项的“值”设置为您要向其发送的URL。这样，您只需从选择值中读取URL并直接将其发送到那里，而无需使用案例陈述进行翻译。
尝试使用switch语句而不是级联if / else，它更容易阅读和调试。您还可以通过将操作（即window.open）移动到switch语句的底部并仅使用每个开关来设置变量来减少代码量并提高其清晰度：

e.g。

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

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

2 个答案: