通过选择选择选项将用户发送到链接

Question

我从Bootstrap 获得了这段代码，以便在我的网站上获得一个交互式表单：

<select class="form-control">
  <option>Default select</option>
</select>'

我接下来要做的是让用户根据他们点击的内容访问特定链接。我知道为了做到这一点，每个选项都必须有一个 id，所以我这样做了：

<select class="form-control">
            <option>what are you interested in?</option>
            <option id="photos">photos</option>
            <option id="books">books</option>
            <option id="recipes">recipes</option>
</select>

这就是我感到困惑的部分所在；我怎样才能让用户真正访问链接？ 我很确定我可以通过一个函数来做到这一点，但是我到底要在那个函数中写什么呢？

Answer 1

由于您使用的是 Bootstrap，因此您可以使用 jQuery 语法（它作为依赖项包含在 Bootstrap 中）。

您的<select> 控件可能未进行最佳配置。首先，<option> 元素应该是这样的：

<option value="photos">photos</option>  <==== value, not id

另外，如果你给选择元素一个 id，你的 javascript/jQuery 将是最简单的：

<select id="mySel" class="form-control">

在您的 javascript 文件中（或在您的 HTML 头部或正文中的 <script></script> 块中）：

$('#mySel').change(function(){ <=== #mySel must match the id of the <select>
    sel = $(this).val();
    if (sel == 'photos'){
        window.location.href = 'http://example.com/photos.php';
    } else if (sel == 'books'){ {
        window.location.href = 'books.html';
    }
});

顺便说一句，您所做的事情不需要“表格”。 Bootstrap 使用术语 form-control 作为类名......这令人困惑，因为该类与表单几乎无关类只是让输入字段看起来很漂亮。它可以随时使用，无论是否在表单构造中。）

确实，您需要表单的唯一情况是您希望从用户那里收集数据，然后将该数据发送到另一个页面进行处理。但是in this day and age，没有必要使用表单，因为 AJAX 一样简单，不会刷新或离开当前页面。

另一方面...我在上面假设您希望用户在从选择控件中进行选择后立即访问该链接。如果，otoh，您希望在提交表单后将它们发送到那里，这就是它的工作原理。

<form></form> 结构围绕着许多 HTML 元素，这些元素变成了键/值对（即 variableName + userEnteredData）。这是它的工作原理。

提交表单时，接收方从以下位置获取这些键/值对：(a) 每个 HTML 元素的 name="" 属性，以及 (b) 用户输入每个元素的数据。它们成对出现，变成VariableName + VariableContents（variableName 是输入到该元素的name="" 属性中的任何内容。

“接收方”由在<form> 标记上的action="" 属性中输入的任何内容定义。例如：

<form action="otherside.php" method="post">

如果没有action="" 属性，那么表单数据将被回发到它开始时所在的同一文件中——因此您通常需要在该文件的顶部添加一些 PHP 代码（index.php？）来确定是否存在是否有数据进来。

无论如何，在接收端，您将收到与用户选择的值相匹配的 <select> 控件的键/值对，并且您需要代码来读取该值是什么然后重定向用户到想要的位置。在 php 中，the command to use would be header().

Answer 2

1。设置：

首先，使用value 属性来确定当前选定的值，而不是id 来确定当前选定的值是什么。这对a11y 的兼容性更好，同时也是事件处理的常见模式。

所以你的 HTML 应该是这样的：

<select class="form-control" id="example">
  <option disabled>what are you interested in?</option>
  <option value="photos">photos</option>
  <option value="books">books</option>
  <option value="recipes">recipes</option>
</select>

2。实施

您的问题不清楚，但取决于您的实施需求：

方法一：立即重定向用户onChange

const handleChange = (event) => {
  const { value } = event.target // gets the currently selected value
  window.location.href = `https://yourURL.com/${value}`
  // or however is your routing setup ^
}

方法2：在onSubmit表单后重定向：

let selectedURL = ''

const handleChange = (event) => {
  const { value } = event.target
  selectedURL = `https://yourURL.com/${value}` 
}

const handleSubmit = (_event) => {
  window.location.href = yourURL
}

3。把它们放在一起

• 方法一：

/* Approach 1 */
const select1 = document.getElementById('approach1')

const handleChange1 = (event) => {
 const { value } = event.target
 const redirectTo = `https://example-url.com/${value}`
 // window.location.href = redirectTo
 console.warn(`Suppressed redirection for example sake (${redirectTo}). Uncomment in your code`)
}

select1.addEventListener('change', handleChange1)

<div> 
  <!-- APPROACH 1 -->
  <h3>Approach 1</h3>
  <select id="approach1" class="form-control">
    <option disabled>what are you interested in?</option>
    <option value="photos">photos</option>
    <option value="books">books</option>
    <option value="recipes">recipes</option>
  </select>
</div>

• 方法二：

/* Approach 2 */
const select = document.getElementById('approach2')
const submit = document.getElementById('submit')
let redirectTo = ''

const handleChange = (event) => {
  const { value } = event.target
  redirectTo = `https://example-url.com/${value}`
}

const handleSubmit = (_event) => {
  // window.locaiton.href = redirectTo
   console.warn(`Suppressed redirection for example sake (${redirectTo}). Uncomment in your code`)
}

select.addEventListener('change', handleChange)
submit.addEventListener('click', handleSubmit)

<div>
  <!-- APPROACH 2 -->
  <h3>Approach 2</h3>
  <select id="approach2" class="form-control">
    <option disabled>what are you interested in?</option>
    <option value="photos">photos</option>
    <option value="books">books</option>
    <option value="recipes">recipes</option>
  </select>
  <button id="submit">Submit</button>
</div>

注意，从技术上讲，您也可以使用<form> 和onSubmit 而不是click，但这是不必要的。我认为@cssyphus 本身就这个问题做出了很好的回答。