선택 상자 문제 - 첫 번째 선택에 기초한 두 번째 옵션

Question

새 창에서 열기에 대한 질문을 올렸지 만 window.location을 사용하면 작동하지 않습니다 ?? 내 자바 스크립트에 문제가 있습니까?

<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> 

는 내가 원하는이 어쨌든 행복하지 않다 정직 두 번째 선택 상자가 될 때까지 버튼을 제출 숨길 수있는 방법 선택한 ...하지만 난 자바 전문가! 누구든지 올바른 방향으로 나를 가리킬 수 있습니까?

Answer 1

나는 ... 당신이 그것을 새 창에서 여부를 원하는 말을하는 경우 말해, 그렇게 할 수

당신이 원하는 경우에 당신은 새 창 다음

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

을 원하는 경우 동일한 창 다음

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

Answer 2

몇 가지 제안 사항이 있습니다.

• 제출 버튼의 onclick 이벤트 대신 양식의 onsubmit 이벤트를 캡처해야합니다. 버튼을 사용하지 않고 양식을 제출할 수 있습니다 (예 : 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의 길이를 계속 확인할 필요가 없습니다.