Question

我对Jquery还是陌生的，并且遇到了一些麻烦：我有三个带有多个选项的select下拉列表，我希望它们根据所做的选择重定向到多个页面。例如：

如果选择选项1 = A，然后选择选项2 = B重定向=第1B页

类似地

如果选择选项1 = A，然后选择选项2 = C重定向= 1C页

Answer 1

您可以使用jQuery使用val（）获取每个选择框的值

例如

// If selectBox1 is set to A and selectBox2 is set to B, then redirectLocation will be AB
var redirectLocation = $("#selectBox1").val() + $("#selectBox2").val();

// Redirect to the URL with the selected values
window.location.href = "http://yourdomainIguess.com/" + redirectLocation;

要注意的重要一点是，您的selectboxes值不同于文本内容。您可以使用HTML中的value属性定义不同于选择框显示的值。

例如

<select id="selectBox1">
  <option value="A">Alpha</option>
  <option value="B">Beta</option>
  <option value="C">Charlie</option>
</select>

如果您使用$("#selectBox1").val()，将得到A，B或C。如果您想要文本内容，请使用$("#selectBox1").text()，它将为您提供Alpha，Beta或Charlie。

如果要使用选定的索引而不是文本或值，则可以使用jQuery的prop函数来获得选择框选定的索引

// Will give us 1B if we select A and B
var redirectLocation = ($("#selectBox1").prop('selectedIndex')+1) + $("#selectBox2").val();

// Redirect to the URL with the selected values
window.location.href = "http://yourdomainIguess.com/" + redirectLocation;

请记住，索引将基于0。因此，第一个选项将返回0，第二个选项将返回1。我在代码中的索引中添加了一个，以使其为第一个元素赋予1。

您还可以检查这些值以重定向到其他页面

// Store our values
var selectVal1 = $("#selectBox1").val();
var selectVal2 = $("#selectBox2").val();

if(selectVal1 == 'A' && selectVal2 == 'B'){
    // If the selected values are A and B then go to google
    window.location.href = "https://www.google.com/";
}
else {
    // Otherwise go to Yahoo
    window.location.href = "https://www.yahoo.com/";
}

如果要在选择框更改上运行重定向，则可以像这样绑定事件

// Use the ID of the select box to bind an event
$("#selectBox1").change(function() {
    // Do things in here

    var selectVal1 = $("#selectBox1").val();
    var selectVal2 = $("#selectBox2").val();

    if(selectVal1 == 'A' && selectVal2 == 'B'){
        window.location.href = "https://www.google.com/";
    }
    else {
       window.location.href = "https://www.yahoo.com/";
    }
});

Answer 2

根据您的回答，我举了一个例子...在本地尝试过，仅当我刷新页面并点击提交后才有效...很奇怪！

 $(document).ready(function() {
	var selectVal1 = $("#selectBox1").val();
	var selectVal2 = $("#selectBox2").val();
	
	if(selectVal1 == 'A' && selectVal2 == 'A'){
		$("#click").click(function() {
		window.location.href = "https://www.google.com/";
    });
}
	else if(selectVal1 == 'A' && selectVal2 == 'B'){    		
		$("#click").click(function() {
		window.location.href = "https://yahoo.com/";
    });
}
	else if(selectVal1 == 'A' && selectVal2 == 'C'){    		
		$("#click").click(function() {
		window.location.href = "https://bing.com/";
    });
}
	else if(selectVal1 == 'A' && selectVal2 == 'D'){    		
		$("#click").click(function() {
		window.location.href = "https://duckduckgo.com";
    });
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select id="selectBox1">
  <option value="">Where are you located?</option>
  <option value="A">Option A</option>
  <option value="B">Option B</option>
  <option value="C">Option C</option>
  <option value="D">Option D</option>
</select>
<select id="selectBox2">
  <option value="">What is your Need?</option>
  <option value="A">Option A</option>
  <option value="B">Option B</option>
  <option value="C">Option C</option>
  <option value="D">Option D</option>
</select>
<input id="click" type="button" value="submit">

Answer 3

Thanks for the help David. This worked:

  $(document).ready(function() {
	var selectVal1 = $("#selectBox1").val();
	var selectVal2 = $("#selectBox2").val();
	$("#selectBox1").change(function() {
            selectVal1 = $("#selectBox1 option:selected").val();
    });
	$("#selectBox2").change(function() {
            selectVal2 = $("#selectBox2 option:selected").val();
    });
	
	$("#click").click(function() {
	
	if(selectVal1 == 'A' && selectVal2 == 'A'){
		
		location = "https://www.google.com/";    
}
	else if(selectVal1 == 'A' && selectVal2 == 'B'){
		
		location = "https://www.yahoo.com/";
    
}
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectBox1">
  <option value="">Where are you located?</option>
  <option value="A">Option A</option>
  <option value="B">Option B</option>
</select>
<select id="selectBox2">
  <option value="">What is your Need?</option>
  <option value="A">Option A</option>
  <option value="B">Option B</option>
</select>
<input id="click" type="button" value="submit">

多个选择选项重定向

3 个答案: