js는 계단식 메뉴 효과를 구현하기 위해 양식 양식 선택 클래스를 사용합니다.

이 기사에서는 javascript가 html의 양식 양식에서 select 클래스를 사용하여 계단식 메뉴 효과를 얻는 방법을 소개합니다. 필요한 친구는 이에 대해 배울 수 있습니다.

코드는 다음과 같습니다.

<form name="form1" method="POST" action="--WEBBOT-SELF--"> 
<select id="select1" onchange="select1onchange()"> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
</select> 
</form>

설정을 권장합니다. 각 옵션의 값은 사용자가 어떤 옵션을 선택하는지 나타냅니다.
선택한 값을 얻으려면 javascript에서 document.getElementById("select1").value; 또는 form1.select1.value;를 사용하세요.
onchange 이벤트를 사용하며, 트리거 조건은 선택 항목의 옵션 값이 변경되는 것입니다.

계단식 메뉴를 사용할 때

두 개의 선택 항목을 생성하고 해당 ID는 각각 select1 및 select2입니다.

코드는 다음과 같습니다.

더 많은 관련 튜토리얼을 보려면

JavaScript 비디오 튜토리얼

<select id="select1" onchange="select1onchange()"> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
</select> 
<select id="select2" onchange="select2onchange()"> 
</select> 
function t1onfocus() 
{ 
document.getElementById("p1").innerHTML="获得焦点"; 
} 
function select1onchange() 
{ 
var i; 
for (i=10;i>=0;i--) 
form1.select2.remove(i); 
var objOption; 
for (i=0;i<=9;i++) 
{ 
objOption=document.createElement("OPTION"); 
objOption.text=form1.select1.value*10+i; 
objOption.value=form1.select1.value*10+i; 
form1.select2.options.add(objOption); 
} 
} 
function select2onchange() 
{ 
p1.innerHTML=form1.select2.value; //p1是文档中用于输出的自定义的项。 
}

을 방문하세요.