如何使用提交按钮组合值添加多个下拉表单并将另一个 html 页面名称添加到 go

Question

I want the submit button to act on the combined values in the two didferent dropwdown menu's in the form.Which will be a html page name.我希望提交按钮对表单中两个不同下拉菜单中的组合值起作用。这将是 html 页面名称。

For example... west and winter is a different option which will creat "westwinter.html" then west and summer is a different option which will make "westsummer.html".例如...west 和winter 是一个不同的选项，将创建“westwinter.html”，然后west 和summer 是一个不同的选项，将创建“westsummer.html”。 and clicking submit button the created page will load.I have already created such types of html page named (ex. westwinter.html).并单击提交按钮，创建的页面将加载。我已经创建了名为（例如 westwinter.html）的此类 html 页面。

I'm struggeling for days to make this work.我努力了好几天才能完成这项工作。 I feel some how this must be possible.我觉得这一定是可能的。 Please help!请帮忙！

This is the code I use.这是我使用的代码。 When I replace the value to a page name (ex. westsummer.html).当我将值替换为页面名称时（例如 westsummer.html）。 The page will be loaded on submit (go).该页面将在提交 (go) 时加载。 I want the values of the first dropdown and second dropdown to be counted and the result should be a page name on submit.我希望计算第一个下拉列表和第二个下拉列表的值，结果应该是提交时的页面名称。 Finaly there should be 16 different html page name.最后应该有 16 个不同的 html 页面名称。 Iwant this solution with jQuery or javascript.我想要这个带有 jQuery 或 javascript 的解决方案。

  <div class="selCont">
  <h2>pick an option</h2>

  <select id="selection" name="selection">
  <option value="1">West</option>
  <option value="2">East</option>
  <option value="3">North</option>
  <option value="4">South</option>
  </select>

  <select id="selection" name="selection">
  <option value="1">Winter</option>
  <option value="2">Spring</option>
  <option value="3">Summer</option>
 <option value="4">Fall</option>

 </select>
 <button class="go-btn" type="submit">Go</button>
 </div>

Answer 1

Firstly, let's set unique IDs for the select tags, and lets set the values to the actual strings (we could keep them numeric and perform a switch on them later to determine their value, but it's easier this way):首先，让我们为 select 标签设置唯一的 ID，然后将值设置为实际的字符串（我们可以将它们保持为数字并稍后在它们上执行开关以确定它们的值，但这样更容易）：

<select id="direction" name="selection">
    <option value="west">West</option>
    <option value="east">East</option>
    <option value="north">North</option>
    <option value="south">South</option>
</select>

<select id="season" name="selection">
    <option value="winter">Winter</option>
    <option value="spring">Spring</option>
    <option value="summer">Summer</option>
    <option value="fall">Fall</option>
</select>

Next, let's write a function to compose a link using the values from those select tags.接下来，让我们编写一个 function 来使用来自这些 select 标记的值组成一个链接。 I've used document.querySelector here, but you can easily change it out for jQuery if you'd like:我在这里使用了document.querySelector ，但如果您愿意，您可以轻松地将其更改为 jQuery：

function getLink() {
    var direction = document.querySelector("#direction").value;
    var season = document.querySelector("#season").value;
    //Assuming that the html files are in the same folder as the current page
    return "./" + direction + season + ".html";
}

Finally, let's update our button to change the page location to the new link when clicked:最后，让我们更新我们的按钮以在点击时将页面位置更改为新链接：

<button class="go-btn" type="submit" onClick="window.location.href = getLink()">Go</button>

Here's everything altogether:这是所有的一切：

 <.DOCTYPE html> <html lang="en"> <body> <div class="selCont"> <h2>pick an option</h2> <select id="direction" name="selection"> <option value="west">West</option> <option value="east">East</option> <option value="north">North</option> <option value="south">South</option> </select> <select id="season" name="selection"> <option value="winter">Winter</option> <option value="spring">Spring</option> <option value="summer">Summer</option> <option value="fall">Fall</option> </select> <button class="go-btn" type="submit" onClick="window.location.href = getLink()" >Go</button> </div> </body> <script> function getLink() { var direction = document.querySelector("#direction");value. var season = document.querySelector("#season");value. return "./" + direction + season + ";html"; } </script> </html>

如何使用提交按钮组合值添加多个下拉表单并将另一个 html 页面名称添加到 go

问题描述

1 个解决方案

解决方案1
1 2019-11-03 17:52:25

如何使用提交按钮组合值添加多个下拉表单并将另一个 html 页面名称添加到 go

问题描述

1 个解决方案

解决方案1 1 2019-11-03 17:52:25

解决方案1
1 2019-11-03 17:52:25