проблема с select box - вторая опция, основанная на первом выборе

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> 

быть честным, я не доволен этим в любом случае я хочу способ скрыть кнопку Submit, пока второй выбранный ящик не было выбрал ... но я не эксперт по java! Может кто-то указать мне верное направление?

Answer 1

Я не могу сказать, если вы хотите сказать, что вы хотите в новом окне или нет, так что ...

Если вы хотите новое окно, то

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

Если вы хотите то же окно, то

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

Answer 2

У меня есть несколько предложений.

• Вы должны зафиксировать событие onsubmit вашей формы, а не кнопку onclick вашей кнопки отправки. Формы могут быть представлены без использования кнопки (например, нажав клавишу ввода), чтобы ваше событие 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.