javascript - 表单选择直接到网页

Question

您好，我正在尝试获取一个表单以根据所选选项路由到指定的网页。我在 https://stackoverflow.com/users/726326/dentaku 的前一个帖子中看到了一些答案但无法让它工作我可能错过了一些简单的事情。非常感谢

<!---
<form>
<p> Type of Purchase: </p>

<select id="type">
<option value="0" id="Select">Select</option>
<option value="1" id="vaccation_rental">Vaccation Rental</option>
<option value="2" id="purchase">Purchase</option>
<option value="3" id="rental">Long Term Rental</option>
</select>

<p>Type of Property</p>
<select id="property">
<option value="0" id="Select">Select</option>
<option value="1" id="Villa">Villa</option>
<option value="2" id="Cabana">cabana</option>

</select>

<br /><br />

 <input  onclick="goToPage();"  type="button" value="Submit" /> 
 </form>

 <script type="text/javascript">

function goToPage()
{


<script>
var targetURL;
if (type==0) {
switch (property) {
    case 1: targetURL = "http://www.mysite.com/index.html";
    case 2: targetURL = "http://www.mysite.com/index.html";
    case 3: targetURL = "http://www.mysite.com/index.html";
}
} else if (type==1) {
switch (property) {
    case 1: targetURL = "http://www.mysite.com/Rental.html";
    case 2: targetURL = "http://www.mysite.com/VRental_villa.html";
    case 3: targetURL = "http://www.mysite.com/VRental_cabana.html";

}
} else if (type==2) {
switch (property) {
    case 1: targetURL = "http://www.mysite.com/Buying.html";
    case 2: targetURL = "http://www.mysite.com/Buying_villa.html";
    case 2: targetURL = "http://www.mysite.com/Buying_cabana.html";
}
} else {
switch (property) {
    case 1: targetURL = "http://www.mysite.com/Rental.html";
    case 2: targetURL = "http://www.mysite.com/Rental_villa.html";
    case 3: targetURL = "http://www.mysite.com/Rental_cabana.html";
}
}
targetURL ? window.location.href = targetURL : alert("Type of Property.");</script>  
<!-- end .content --></div>
<!-- end .container --></div>
</body>
</html>

Answer 1

<form>
<p> Type of Purchase: </p>

<select id="type">
<option value="0" id="Select">Select</option>
<option value="1" id="vaccation_rental">Vaccation Rental</option>
<option value="2" id="purchase">Purchase</option>
<option value="3" id="rental">Long Term Rental</option>
</select>

<p>Type of Property</p>
<select id="property">
<option value="0" id="Select">Select</option>
<option value="1" id="Villa">Villa</option>
<option value="2" id="Cabana">cabana</option>

</select>

<br /><br />

 <input  onclick="goToPage();"  type="button" value="Submit" /> 
 </form>

 <script type="text/javascript">

function goToPage()
{

var targetURL;
if (parseInt(type.options[type.selectedIndex].value,10) === 0) {
switch (parseInt(property.options[property.selectedIndex].value,10)) {
    case 0: targetURL = "http://www.mysite.com/index.html"; break;
    case 1: targetURL = "http://www.mysite.com/index.html"; break;
    case 2: targetURL = "http://www.mysite.com/index.html"; break;
}
} else if (parseInt(type.options[type.selectedIndex].value,10) === 1) {
switch (parseInt(property.options[property.selectedIndex].value,10)) {
    case 0: targetURL = "http://www.mysite.com/Rental.html"; break;
    case 1: targetURL = "http://www.mysite.com/VRental_villa.html"; break;
    case 2: targetURL = "http://www.mysite.com/VRental_cabana.html"; break;

}
} else if (parseInt(type.options[type.selectedIndex].value,10) ===2) {
switch (parseInt(property.options[property.selectedIndex].value,10)) {
    case 0: targetURL = "http://www.mysite.com/Buying.html"; break;
    case 1: targetURL = "http://www.mysite.com/Buying_villa.html"; break;
    case 2: targetURL = "http://www.mysite.com/Buying_cabana.html"; break;
}
} else {
switch (parseInt(property.options[property.selectedIndex].value,10)) {
    case 0: targetURL = "http://www.mysite.com/Rental.html"; break;
    case 1: targetURL = "http://www.mysite.com/Rental_villa.html"; break;
    case 2: targetURL = "http://www.mysite.com/Rental_cabana.html"; break;
}
}
alert(targetURL);
//targetURL ? window.location.href = targetURL : alert("Type of Property.");
}
</script>  
<!-- end .content --></div>
<!-- end .container --></div>
</body>
</html>

这是您代码的工作版本。最直接打破它的是开头 <script>标记和 goToPage 缺少右括号功能。您的代码如何以更深入、更微妙的方式被破坏。

if (type==0) {
switch (property) {

在这里，type和 property引用实际的选择元素本身，而不是当前选择的选项的值，这是您正在寻找的。以获得选定的选项使用

SelectElement.options[SelectElement.selectedIndex].value

然后您必须将其包装在 parseInt 中将其转换为数字进行比较。不要忘记指定基数，以便它始终转换为正确的以 10 为底的数字。

您没有向您的 case 添加任何 break 语句，因此如果您匹配了一个 the 并且它下面有一个 case，那么该 case 也会被执行。此外，您在脚本中从 1 开始计数，但选项中的值从 0 开始。

最后，最重要的一点是，当您使用 0 进行比较时，请使用严格相等，即三个等号 (===) 进行比较。为什么？因为 0 是假的，所以任何假的都将使用正常相等计算为真。

0 == false;
true;
0 == [];
true;

作为提示，我建议使用值而不是所有这些 switch/case 语句创建字符串。如果您想稍后添加一个船屋，您将需要更新任何一个，这很容易出现程序员错误，而且通常只是一件麻烦事。

<select id="type">
<option value="" id="Select">Select Type</option>
<option value="rent" id="Select">Rent</option>
</select>

<p>Type of Property</p>
<select id="property">
<option value="" id="Select">Select Property</option>
<option value="boathouse" id="Select">Boathouse</option>

</select>

<br /><br />
    <input  onclick="goToPage();"  type="button" value="Submit" /> 
 </form>
<script type="text/javascript">
    function goToPage(){
        var baseURL = 'http://www.mysite.com/'
        var targetURL = window.location.href; // Default value
        if(type.options[type.selectedIndex].value != false && property.options[property.selectedIndex].value != false){
            // If we have both values use them with underscore
            targetURL = baseURL+type.options[type.selectedIndex].value+"_"+property.options[property.selectedIndex].value+'.html';
        }else if(type.options[type.selectedIndex].value || property.options[property.selectedIndex].value){
            // Use whatever one we have
            targetURL = baseURL+ (type.options[type.selectedIndex].value || property.options[property.selectedIndex].value)+'.html';
        }
        alert(targetURL);
    }

</script>

我还没有真正对此进行太多测试，但它确实有效并且可以很容易地改进，但我认为它传达了这个想法。