Question

我对这种事情很陌生，并试图想办法让这项工作成功。我想让用户从下拉菜单中选择选项，当他们点击搜索按钮时，让他们转到根据他们的选择创建的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>

Answer 1

更改<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＆amp; attr -__ Domestics__BedSize = California King＆amp; 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);

Answer 2

var myFunction = function（）{ var stringConstruction ='blahblah.com/cat_7886/Mcatg/cat_3/139.uts/#/?attr-__Domestics__TypeOfBedCoverIncluded=' + document.getElementsByName（'type'）[0] .value +'＆amp; attr -__ Domestics__BedSize =' + document.getElementsByName（'bedSize'）[0] .value +'＆amp; attr -__ General__Brand =' + document.getElementsByName（'brand'）[0] .value;

window.location = stringConstruction; }

document.getElementById（“submitForm”）。addEventListener（'click'，myFunction）;

从下拉菜单填充URL

2 个答案: