表格选择直接到网页

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。

你没有在你的案例中添加任何break语句，所以如果你匹配一个并且它下面有一个案例，那么这个案例也会被执行。此外，您在脚本中开始计数为1，但选项中的值从0开始。

最后，最重要的一点是，当您使用0进行比较时，使用严格相等，三个等号（===）来做comaprisions。为什么？因为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>

我还没有真正做过多少测试，但是它有效并且可以轻松改进，但我认为它可以解决这个问题。

Answer 2

此处的问题是，type和property未在您网页的任何位置定义。您需要在函数的开头添加它：

var type = document.getElementById("type").value;
var property = document.getElementById("property").value;

另外，为什么你使用switch作为属性而不是类型？您可以将它用于：

    switch (type) {
    case 1:
        switch(property) {
            case 1:
                targetURL = "http://www.mysite.com/index.html";
                break;
            case 2:
                targetURL = "http://www.mysite.com/index.html";
                break;
            case 3:
                targetURL = "http://www.mysite.com/index.html";
                break;
        }
        break;
    case 2:
        switch (property) {
            case 1:
                targetURL = "http://www.mysite.com/Rental.html";
                break;
            case 2:
                targetURL = "http://www.mysite.com/VRental_villa.html";
                break;
            case 3:
                targetURL = "http://www.mysite.com/VRental_cabana.html";
                break;
        }
        break;
    ....
}

最后，我发现，对于这种页面导航，我更好地更改action事件中的表单onsubmit：

将HTML更改为：

<form id="myForm" onsubmit=onFormSubmit()>

将JS更改为：

function onFormSubmit() {
    // Getting the dropdown values
    var type = parseInt(document.getElementById("type").value);
    var property = parseInt(document.getElementById("property").value);

    // Setting the URL depending on the type / property
    var targetURL;
    switch (type) {
        case 1:
            switch(property) {
                case 1:
                    targetURL = "http://www.mysite.com/index.html";
                    break;
                case 2:
                    targetURL = "http://www.mysite.com/index.html";
                    break;
                case 3:
                    targetURL = "http://www.mysite.com/index.html";
                    break;
            }
            break;
        case 2:
            switch (property) {
                case 1:
                    targetURL = "http://www.mysite.com/Rental.html";
                    break;
                case 2:
                    targetURL = "http://www.mysite.com/VRental_villa.html";
                    break;
                case 3:
                    targetURL = "http://www.mysite.com/VRental_cabana.html";
                    break;
            }
            break;
        ....
    }

    // Setting the form's action
    document.getElementById("myForm").action = targetURL;

    // Return true so the submit can continue
    return true;
}