javascript - 尝试将选择值发送到其他页面时变得不确定

Question

我有一个小的 JavaScript 问题。

我有以下表格:

<form method="get" name="basic" id="basicId" action="/page2"> 
     <select id="activity" name="activity" class="form-control inputbox">
          <option value="default" class="activities">Select value from dropdown:</option>
          <option value="a" class="tests">A</option>
          <option value="b" class="tests">B</option>
          <option value="c" class="tests">C</option>
     </select>
     <button type="submit" id="searchBtn" placeholder="Search">Search</button>
</form>

我想做的是从 select 标记 获取值 并在 page2 中使用它。例如，如果选项是 A，则值应为 ="a"。我想在 page2 中使用 value="a"。document.getElementById("output"):这里我想在 page2 中打印结果。

我在第二页中尝试做的事情:

<script>
var select = document.getElementById("activity");
var e = select.options[select.SelectedIndex].value;
document.getElementById("output").innerHTML = e;
<!-- This doesn't show anything. -->

var test = document.getElementsbyName("activity").values;
document.getElementById("output").innerHTML = test;
<!-- The output is: function values() { [native code] } -->


var test = document.getElementsByName("activity").value;
document.getElementById("opinion").innerHTML = test;
<!-- The output is: undefined -->

</script>

所以基本上，通过 ID 或名称获取选择元素是行不通的。获取选择元素 ID.value 不起作用。通过索引获取选择元素不起作用。

有什么想法吗？我真的什么都试过了。我是不是把代码写错地方了？

我是否必须通过服务器端发送此信息？P.S.:我正在使用 Node.js 和 Express 编写应用程序，并且我正在使用 Handlebars 。

亲切的问候，G.

Answer 1

更新:如果你想获取其他页面的值，你需要从 url 获取它，因为整个新页面被渲染并且你的旧值将不存在。

如果你在 url 中有你的值，只需通过这个获取它

let url = window.location

我假设，您正在尝试获取 dropdown

的值

select 始终具有 value 属性，它实际上是您从下拉列表中选择的值

只要您想要选择的选项，您只需要查找 select 的 value。

在你的例子中，只需附加一个 onchange 监听器 来选择，只要选择的值发生变化就会触发

var select = document.getElementById("activity");
var mySelectValue = select.value // set the default value
select.onchange = function() {
	console.log(select.value)
  mySelectValue = select.value // update whenever value get changed or new value chosen
}

// Do whatever you want to do with selectvalue

<form method="get" name="basic" id="basicId" action="/page2"> 
     <select id="activity" name="activity" class="form-control inputbox">
          <option value="default" class="activities">Select value from dropdown:</option>
          <option value="a" class="tests">A</option>
          <option value="b" class="tests">B</option>
          <option value="c" class="tests">C</option>
     </select>
     <button type="submit" id="searchBtn" placeholder="Search">Search</button>
</form>