Question

我刚刚发布了一个关于在新窗口中打开的问题，但如果我使用window.location它不起作用？我的javascript有问题吗？

    <script type="text/javascript">

function setOptions(chosen){

var selbox = document.formName.table;
selbox.options.length = 0;

if (chosen == " ") {
 selbox.options[selbox.options.length] = new Option('No diploma selected',' ');
 }
if (chosen == "1") {
 selbox.options[selbox.options.length] = new Option('first choice - option one','http://www.pitman-training.com');
 selbox.options[selbox.options.length] = new Option('first choice - option two','onetwo');
 }
if (chosen == "2") {
 selbox.options[selbox.options.length] = new Option('second choice - option one','twoone');
 selbox.options[selbox.options.length] = new Option('second choice - option two','twotwo');
 selbox.options[selbox.options.length] = new Option('second choice - option three','twothree');
 selbox.options[selbox.options.length] = new Option('second choice - option four','twofour');
 }
if (chosen == "3") {
 selbox.options[selbox.options.length] = new Option('third choice - option one','threeone');
 selbox.options[selbox.options.length] = new Option('third choice - option two','threetwo');
 }
}

</script>

我知道它有点乱......

<form name="formName" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">

<select name="optone" size="1" onchange="setOptions(document.formName.optone.options[document.formName.optone.selectedIndex].value);">
 <option value=" " selected="selected">Please select a diploma</option>
 <option value="1">First Choice</option>
 <option value="2">Second Choice</option>
 <option value="3">Third Choice</option>
</select>

<select name="table" size="1" >
 <option value=" " selected="selected">No diploma selected</option>
</select>

<input type="submit" onclick="ob=this.form.table;window.location(ob.options[ob.selectedIndex].value)"/>


</form>

老实说我对此不满意无论如何我想要一种隐藏提交按钮的方法，直到选择了第二个选定的框...但我不是java专家！有人能指出我正确的方向吗？

Answer 1

我不知道你是否在新窗口中说你想要它，所以......

如果你想要一个新窗口，那么

window.open(ob.options[ob.selectedIndex].value)

如果你想要同一个窗口，那么

window.location = ob.options[ob.selectedIndex].value

Answer 2

我有一些建议。

您应该捕获表单的onsubmit事件，而不是提交按钮的onclick事件。可以在不使用按钮的情况下提交表单（例如，按Enter键），这样您的onclick事件就会错过。
您可以使用window.open(url)功能打开新窗口。
而不是隐藏输入按钮（不会阻止键盘用户提交表单），在onsubmit事件中确保选择了选项，如果不是，则return false;。
您可以通过不对元素对象进行如此多的查找来结束和加速代码。
在事件处理程序属性中使用this来获取触发元素的句柄，例如<select name="optone" size="1" onchange="setOptions(this.options[this.selectedIndex].value);">

示例：

document.formName.table.onsubmit = function ()
{
    if (this.table.selectedIndex == 0 && this.optone.selectedIndex == 0)
    {
        // This is just an example. Showing a div would be better than alert();
        alert("You haven't filled in the required elements");

        // Cancel submission by returning false
        return false;
    }
    ob=this.table;

    // Open a new window and go to URL:
    window.open(ob.options[ob.selectedIndex].value);

    // Go to URL in current window:
    // window.location = ob.options[ob.selectedIndex].value;
}
function setOptions(chosen){       
    var selbox  = document.formName.table;
    var options = selbox.options;
    var cOpt    = options.length = 0; 

    if (chosen == " ") { 
        options[cOpt++] = new Option('No diploma selected',' '); 
    } 
    else if (chosen == "1") { 
        options[cOpt++] = new Option('first choice - option one','http://www.pitman-training.com'); 
        options[cOpt++] = new Option('first choice - option two','onetwo'); 
    } 
    else if (chosen == "2") { 
        options[cOpt++] = new Option('second choice - option one','twoone'); 
        options[cOpt++] = new Option('second choice - option two','twotwo'); 
        options[cOpt++] = new Option('second choice - option three','twothree'); 
        options[cOpt++] = new Option('second choice - option four','twofour'); 
    } 
    else if (chosen == "3") { 
        options[cOpt++] = new Option('third choice - option one','threeone'); 
        options[cOpt++] = new Option('third choice - option two','threetwo'); 
    } 
}

始终在适用的地方使用else if，并尝试减少对DOM节点及其属性（例如selbox.options.length）的查找。 cOpt++会让我们使用cOpt的当前值，然后将其递增1，因此您无需继续检查selbox.options的长度。

选择框的问题 - 基于第一选择的第二选项

2 个答案: