如何使用提交按钮添加多个下拉表单 合并值并转到网址
How to add multiple dropdown form with submit button combine value and go to url
我希望提交按钮作用于表单中两个下拉菜单中的组合值。
例如。。。西部和冬天是不同的URL,然后是西部和夏天
我挣扎了好几天才能完成这项工作。我觉得这怎么可能。请帮忙!
这是我使用的代码。当我将值替换为 URL 时。URL 将在提交(转到)时加载。我希望计算第一个下拉列表和第二个下拉列表的值,结果应该是提交时的 URL。最后应该有 16 个不同的 URL。
$(document).ready(function () {
$(".go-btn").click(function () {
location = $("#selection option:selected").val();
});
});
<div class="selCont">
<h2>pick an option</h2>
<select id="selection" name="selection">
<option value="1">West</option>
<option value="2">East</option>
<option value="3">North</option>
<option value="4">South</option>
</select>
<select id="selection" name="selection">
<option value="1">Winter</option>
<option value="2">Spring</option>
<option value="3">Summer</option>
<option value="4">Fall</option>
</select>
<button class="go-btn" type="submit">Go</button>
</div>
试试这段代码:
jQuery( document ).ready(function( $ ) {
$( ".go-btn" ).click(function() {
// Grab text from select boxes
var firstSelection = $( "#selection1 option:selected" ).text();
var secondSelection = $( "#selection2 option:selected" ).text();
// Set URL, change as necessary
var url = "http://www.example.com/" + firstSelection + "/" + secondSelection;
// Redirect
window.location.href = url;
});
});
此外,更改选择框上的 ID:
<select id="selection1">
<option value="1">Hands</option>
<option value="2">Feet</option>
<option value="3">Body</option>
</select>
<select id="selection2">
<option value="1">Acne</option>
<option value="2">Dry Skin</option>
<option value="3">Redness</option>
<option value="4">Sensitivity</option>
</select>
谢谢
安德鲁
尝试为两个选择器元素提供一个唯一的 id。这是一个工作片段:
(function () {
$(".go-btn").on(
'click',
function (e) {
// within this function you should figure out the url
// to redirect to, depending on the selected values
// the next line only shows the text of selected values
$('#selected').html([$('#select1 option:selected').text(),
$('#select2 option:selected').text()].join('/'));
});
}());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="selCont">
<h2>pick an option</h2>
<select id="select1">
<option value="1" selected>West</option>
<option value="2">East</option>
<option value="3">North</option>
<option value="4">South</option>
</select>
<select id="select2">
<option value="1" selected>Winter</option>
<option value="2">Spring</option>
<option value="3">Summer</option>
<option value="4">Fall</option>
</select>
<button class="go-btn" type="submit">Go</button>
</div>
<div id="selected"></div>
所以我现在需要做的是例如:如果用户选择:
我是:"用我的手工作的人"我需要:"紫外线防护"
一旦他们点击Go,它就会带他们,例如:http://glysomed.bydecosta.com/portfolio-item/hand-cream-frag-free/
或
如果用户单击:我是:"用脚工作的人"我需要:"痤疮"
一旦他们点击Go,它就会带他们,例如:http://glysomed.bydecosta.com/portfolio-item/foot-balm/
jQuery( document ).ready(function( $ ) {
$( ".go-btn" ).click(function() {
// Grab text from select boxes
var firstSelection = $( "#selection1 option:selected" ).text();
var secondSelection = $( "#selection2 option:selected" ).text();
// Set URL, change as necessary
var url = "http://www.example.com/" + firstSelection + "/" + secondSelection;
// Redirect
window.location.href = url;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="selCont">
<h2>Me Time</h2>
I Am:
<select id="select1">
<option value=" " selected="selected">- Select -</option>
<option value="1">Someone who works with my hands</option>
<option value="2">Someone who works wit my feet</option>
<option value="3">Someone who works with my body</option>
</select>
and I need:
<select id="select2">
<option value=" " selected="selected">- Select -</option>
<option value="1">UV Protection</option>
<option value="2">Acne</option>
<option value="3">Dry Skin</option>
<option value="4">Eczema</option>
<option value="5">Itchy Relief</option>
<option value="6">Redness</option>
<option value="7">Sensitive Skin</option>
</select>
<button class="go-btn" type="submit">Go</button>
</div>
<div id="selected"></div>
相关文章:
- 可以't让我的if语句处理js中的html表单输入
- 如何使用WCF服务和javascript表单post上传.doc文件
- Javascript生成的表单未提交
- 如何使用javascript或html下载PDF格式的填写表单
- HTML表单提交时未执行外部函数
- 如何将输入(type=text)从html表单传递到javascript函数
- 通过单击表单中的按钮,在代码生成中使用javascript生成字母数字代码
- Ajax发布表单序列化,发布引号'
- 多级HTML表单
- 后焦点更改为IE 11中的地址栏,而不是转移到表单中的下一个控件
- 在验证和发送邮件后更改联系人表单的 html
- jQuery表单添加不适用于下拉列表
- 如何使用提交按钮添加多个下拉表单 合并值并转到网址
- 如何将表单类值合并到新的变量字符串中
- 合并指令'将功能转换为Angular表单验证
- 简化php表单验证-将两个文件合并为一个文件
- 合并表单选择的值
- 将表单数据与XML数据合并
- 合并2个搜索表单到1个输入,加上复选框
- AngularJS联系人表单与当前的app.js合并