从下拉菜单中填充 URL

我对这种事情很陌生，正在尝试想一种方法来做到这一点。我希望用户从下拉菜单中选择选项，当他们单击搜索按钮时，让他们转到基于他们的选择创建的 URL。任何帮助或指导将不胜感激，谢谢大家。

到目前为止的代码：

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<form action="">
<table>
<tbody><tr><th align="left">Type:</th><td>
<select name="type">
<option selected="">Comforter <!-- This selection would have this piece of the URL: #/?attr-__Domestics__TypeOfBedCoverIncluded=Comforter -->
</option><option>Duvet
</option><option>Bedspread
</option></select><br>
</td></tr><tr><th align="left">Bed Size:</th><td>
<select name="bed size">
<option selected="">California King <!-- This selection would have this piece of the URL: &attr-__Domestics__BedSize=California King -->
</option><option>Full
</option><option>King
</option></select><br>
</td></tr><tr><th align="left">Brand:</th><td>
<select name="brand">
<option selected="">Alcove <!-- This selection would have this piece of the URL: &attr-__General__Brand=Alcove -->
</option><option>Lush Decor
</option><option>Non Branded
</option></select>
</td></tr></tbody></table>
<p><input type="SUBMIT" value="Search">
<!-- This button when submitted would go here: blahblah.com/cat_7986/Mcatg/cat_3/139.uts/ ***The end of this URL would be populated from the dropdown selections*** -->
</p></form>
</body>
</html>

更改<input type="submit" value="Search" />至： <input id="submitForm" type="SUBMIT" value="Search">还更改：<select name="bed size"> <select name="bedSize">

并添加一些JavaScript：

var myFunction = function() {
  var stringConstruction = document.getElementsByName('type')[0].value + "/" + document.getElementsByName('bedSize')[0].value + "/" + document.getElementsByName('brand')[0].value;
  alert(stringConstruction);
}
document.getElementById("submitForm").addEventListener('click', myFunction);

下面是一个示例：

https://jsfiddle.net/mbkqbd91/

编辑：您的要求是：

我想转到此网址： blahblah.com/cat_7986/Mcatg/cat_3/139.uts/#/?attr-__Domestics__TypeOfBedCoverInclu ded=Comforter&attr-__Domestics__BedSize=California King&attr-__General__Brand=Alcove 单击搜索按钮时，而不是显示弹出框

所以代码将是：

 var myFunction = function() {
     var stringConstruction = 'blahblah.com/cat_7886/Mcatg/cat_3/139.uts/#/?attr-__Domestics__TypeOfBedCoverIncluded=' 
     + document.getElementsByName('type')[0].value 
     + '&attr-__Domestics__BedSize=' 
     + document.getElementsByName('bedSize')[0].value 
     + '&attr-__General__Brand=' 
     +  document.getElementsByName('brand')[0].value;
  window.location = stringConstruction;
}
document.getElementById("submitForm").addEventListener('click', myFunction);

var myFunction = function(( { var stringConstruction = 'blahblah.com/cat_7886/Mcatg/cat_3/139.uts/#/?attr-__Domestics__TypeOfBedCoverIncluded=' + document.getElementsByName('type'([0].value + '&attr-__Domestics__BedSize=' + document.getElementsByName('bedSize'([0].value + '&attr-__General__Brand=' + document.getElementsByName('brand'([0].value;

window.location = stringConstruction;}

document.getElementById("submitForm"(.addEventListener('click'， myFunction(;

相关内容

最新更新

热门标签：