2

您好我正在尝试根据所选选项获取一个表单以路由到指定的网页。我在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>
4

2 回答 2

0

这里的问题是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;
}
于 2013-08-26T05:11:40.937 回答
0 
<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 进行比较时，使用严格相等，三个等号（===）来进行比较。为什么？因为 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>

我还没有真正做太多的测试，但它可以工作并且可以很容易地改进，但我认为它可以传达这个想法。

于 2013-08-26T04:36:15.233 回答