根据所选选项重定向到网站的 Html 可搜索列表答案

【问题标题】：Html searchable list that redirects to a website depending on the selected option根据所选选项重定向到网站的 Html 可搜索列表
【发布时间】：2018-01-29 06:21:18
【问题描述】：

是否可以将选项重定向到网站 url？

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

基本上我将如何结合上面的代码和下面的代码？

 &lt;a href="https://www.google.com/"&gt;Google&lt;/a&gt;

谢谢

【问题讨论】：

标签： html drop-down-menu hyperlink datalist

【解决方案1】：

https://jsfiddle.net/kokb207o/ 您可以使用 Javascript 来完成此壮举，方法是更改元素的 href，如下所示：

HTML

<select id="browsers" onblur='changeHref()'>
  <option value="google">Google</option>
  <option value="youtube">Youtube</option>
  <option value="facebook">Facebook</option>
  <option value="instagram">Instagram</option>
  <option value="twitter">Twitter</option>
</select>
<a href='javascript: void(0)' id='url' target='_blank'>Click Me!</a>

Javascript

function changeHref() {
  document.getElementById('url').href = 'http://www.' + document.getElementById('browsers').value + '.com';
}

【讨论】：

【解决方案2】：

试试这个 sn-p。出于某种原因，像 google.com 这样的网站由于安全原因没有重定向。但第一个链接工作

function redirect(goto) {
  if (goto != '') {
    window.location = goto;
  }
}

var selectEl = document.getElementById('redirectSelect');

selectEl.onchange = function() {
  var goto = this.value;
  redirect(goto);

};

<select id="redirectSelect">
    <option value="">Please select</option>
    <option value="https://www.codeconquest.com/what-is-coding/
">Code Conquest</option>
    <option value="https://www.google.com">Google</option>
</select>

【讨论】：

可以和datalist一起使用吗？