选择两个选项时,使用 jquery 更改按钮上的 link
use jquery to change a link on a button when two options are selected
您好,我想创建一个简单的搜索表单,这样当用户选择选项 1 时,它就会显示特定的选项。然后我希望按钮上的 link 将他们带到网站上的那个页面。
我从另一个线程中获得了这段代码,它工作得很好(没有按钮)但是我如何制作一个按钮所以如果在第一个框中选择了动物然后在第二个框中选择了狼按钮 link 将更改为 www.mysite.com/wolf.html?
谢谢
$("#select1").change(function() {
if ($(this).data('options') == undefined) {
/*Taking an array of all options-2 and kind of embedding it on the select1*/
$(this).data('options', $('#select2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select name="select1" id="select1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select name="select2" id="select2">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
您可以向页面添加一个按钮,并向其添加一个 jQuery 点击功能以检查用户的选择,然后分配给 window.location.href?
使用这个:
HTML:
<select name="select1" id="select1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select name="select2" id="select2">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
<a href="" ></a>
JS:
$("#select1").change(function() {
if ($(this).data('options') == undefined) {
/*Taking an array of all options-2 and kind of embedding it on the select1*/
$(this).data('options', $('#select2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
var link = 'www.mysite.com/'+ $('#select2 :selected').text() +'.html';
$('a').attr({href:link}).text(link);
});
$("#select2").change(function() {
var link = 'www.mysite.com/'+ $("option:selected", this).text() +'.html';
$('a').attr({href:link}).text(link);
});
您好,我想创建一个简单的搜索表单,这样当用户选择选项 1 时,它就会显示特定的选项。然后我希望按钮上的 link 将他们带到网站上的那个页面。
我从另一个线程中获得了这段代码,它工作得很好(没有按钮)但是我如何制作一个按钮所以如果在第一个框中选择了动物然后在第二个框中选择了狼按钮 link 将更改为 www.mysite.com/wolf.html?
谢谢
$("#select1").change(function() {
if ($(this).data('options') == undefined) {
/*Taking an array of all options-2 and kind of embedding it on the select1*/
$(this).data('options', $('#select2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select name="select1" id="select1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select name="select2" id="select2">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
您可以向页面添加一个按钮,并向其添加一个 jQuery 点击功能以检查用户的选择,然后分配给 window.location.href?
使用这个:
HTML:
<select name="select1" id="select1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select name="select2" id="select2">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
<a href="" ></a>
JS:
$("#select1").change(function() {
if ($(this).data('options') == undefined) {
/*Taking an array of all options-2 and kind of embedding it on the select1*/
$(this).data('options', $('#select2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
var link = 'www.mysite.com/'+ $('#select2 :selected').text() +'.html';
$('a').attr({href:link}).text(link);
});
$("#select2").change(function() {
var link = 'www.mysite.com/'+ $("option:selected", this).text() +'.html';
$('a').attr({href:link}).text(link);
});