在 HTML 中生成链接

Question

我有一个包含两个 datalist 的表单，我想根据用户的选择生成一个 link。

<form>

<input list="Cars">
  <datalist id="Cars">
  <option value="Honda" selected>Honda</option>
  <option value="Mazda">Mazda</option>
  <option value="Ford">Ford</option>
  <option value="Nissan">Nissan</option>
  <option value="Subaru">Subaru</option>
  </datalist>

<input list="Years">
  <datalist id="Years">
  <option value="2017">2017</option>
  <option value="2016">2016</option>
  <option value="2015">2015</option>
  </datalist>

  <input type="reset">

</form>

例如，如果用户选择本田和 2017，则出现 link，地址为 Honda/2017.net。如果用户选择斯巴鲁和2015那么地址就是Subaru/2015.net等等

我可以在代码中手动输入不同的 href，但我不确定您是如何根据选择进行 link 更改的？

Answer 1

使用下面的代码片段作为样板文件。

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
<form>

 <input list="Cars" onchange="generateUrl()">
   <datalist id="Cars">
   <option value="Honda" selected>Honda</option>
   <option value="Mazda">Mazda</option>
   <option value="Ford">Ford</option>
   <option value="Nissan">Nissan</option>
   <option value="Subaru">Subaru</option>
   </datalist>

 <input list="Years" onchange="generateUrl()">
   <datalist id="Years">
   <option value="2017">2017</option>
   <option value="2016">2016</option>
   <option value="2015">2015</option>
   </datalist>

   <input type="reset">

</form>

<p id="generated">
 
</p>
<script type="text/javascript">
function generateUrl(){
 var x = document.querySelector("[list='Cars']").value;
 var y = document.querySelector("[list='Years']").value;
 document.getElementById('generated').innerHTML = (x+y);
}
</script>
</body>
</html>

Answer 2

您可以使用 onchange 事件获取 <datalist> 的值；将它们存储在某处的变量中，然后将其写入您的 link.

var car = '';
var year = '';

$("input[name=car-list]").on('change', function(){
    car = $(this).val();
});

$("input[name=yr-list]").on('change', function(){
    year = $(this).val();
});

$("input[name=submit]").on('click', function(){
    $("#mylink").attr('href', car + '/' + year);
    $("#mylink").html(car + '/' + year);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>

<input list="Cars" name="car-list">
  <datalist id="Cars">
  <option value="Honda" selected>Honda</option>
  <option value="Mazda">Mazda</option>
  <option value="Ford">Ford</option>
  <option value="Nissan">Nissan</option>
  <option value="Subaru">Subaru</option>
  </datalist>

<input list="Years" name="yr-list">
  <datalist id="Years">
  <option value="2017">2017</option>
  <option value="2016">2016</option>
  <option value="2015">2015</option>
  </datalist>

  <input type="button" name="submit" value="Submit">
  <input type="reset">

</form>

<a id="mylink" href="">My Link</a>

Answer 3

对于所谓的动态 html 或 DHTML，您需要 Javascript。可以这样做：

<!DOCTYPE html>
<script type="text/javascript">
function generateLink()
{

  var brand = document.getElementById('carBrand').value;

  var year = document.getElementById('carYear').value;

  document.leform.action =brand + '/' + year + '.html';

  return true;

}
</script>

<form name="leform" onsubmit="return generateLink();">

<input list="Cars" id='carBrand'>
  <datalist id="Cars">
  <option value="Honda" selected>Honda</option>
  <option value="Mazda">Mazda</option>
  <option value="Ford">Ford</option>
  <option value="Nissan">Nissan</option>
  <option value="Subaru">Subaru</option>
  </datalist>

<input list="Years" id='carYear'>
  <datalist id="Years">
  <option value="2017">2017</option>
  <option value="2016">2016</option>
  <option value="2015">2015</option>
  </datalist>

  <input type="reset">
  <input type="submit">

</form>

会发生什么？

如果提交按钮被点击，generateLink()函数被调用。 onsubmit="return generateLink();"

在 generateLink() 函数中，car/brand 的所选选项的值和年份是使用 getElementById 函数从 html 中读取的。

然后提取的品牌和年份值用于生成相应的 link，通过连接汽车、斜线、年份和最后的字符串 '.html'。

表单将重定向到的 link 在表单操作属性中设置。 document.leform.action

要处理表单提交的数据，您需要某种 CGI 机制：https://en.wikipedia.org/wiki/Common_Gateway_Interface 例如，您可以使用 PHP 将数据进一步传递到数据库。

希望对你有帮助^^-d

PS：您可能还想将 PHP 中的表单 (action=) 后的页面实现为动态内容。使用 HTTP GET 请求，这可能看起来像 /show.php?car=Subaru&Year=2016 这将使您不必为每个选项创建一个 html 文件（car X year = 15 个文件！）。 HTTP GET 请求的 URL 可以像 Honda/2017.net 一样被添加为书签。此处有更多信息：http://php.net/manual/en/reserved.variables.request.php

在 HTML 中生成链接

Generating links in HTML

html

forms

datalist

href