Question

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

<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，则会显示该链接，地址为Honda/2017.net。如果用户选择Subaru和2015，则地址为Subaru/2015.net等等。

我可以在代码中手动输入不同的href，但我不确定如何根据选择更改一个链接？

Answer 1

使用以下代码段作为样板。

＆＃13;

<!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>

＆＃13;

Answer 2

您可以使用<datalist>事件获取onchange的值;将它们存储在某个变量中，然后将其写入链接。

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

你需要Javascript来实现所谓的动态html或DHTML。可以这样做：

<!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（）函数中，使用getElementById函数从html读取汽车/品牌和年份的所选选项的值。

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

表单将重定向到的链接在表单操作属性中设置。 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文件（车X年= 15个文件！）。 HTTP GET请求的URL可以像Honda / 2017.net一样加入书签。有关此内容的更多信息，请访问：http://php.net/manual/en/reserved.variables.request.php

在HTML中生成链接

3 个答案: