There are two list boxes (SELECTs) in HTML and
When you change the selection of the first list,
Below is an example of the source, but if JavaScript is written or written in a bad place,
I'm thinking about it, but I can't solve it through trial and error.
*For HTML and JavaScript descriptions, use
from above when the browser reads HTML.
Read, interpret, and run, as described in JavaScript's beginner's description site.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE> Car and Color Selection</TITLE>
<STYLE type="text/css">
<!--
US>BODY{
border-top —2px#FF0000 solid;
text-align:center;
color:#000000;
}
-->
</STYLE>
<SCRIPT TYPE="text/javascript">
<!--
// Other Java Scripts
// -- >
</SCRIPT>
// I picked up the cord, but it doesn't work.
<SCRIPT TYPE="text/javascript">
<!--
functionDeleteListColor(x)
{
if(x.hasChildNodes()){
while(x.childNodes.length>0){
x.removeChild(x.firstChild)
}
}
}
// -- >
</SCRIPT>
</HEAD>
<!-------------------------------------------------------------------------
<!--body start---------------------------------------------------->
<BODY topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<DIV>
<!--I picked up the code, but it doesn't work-->
<!--
comment out
<script type="text/javascript">
functionDeleteListColor(){
sl=document.form_list_color.getElementById('list_color')
while(sl.lastChild)
{
sl.removeChild(sl.lastChild);
}
}
</script>
-->
<!--I picked up the code, but it doesn't work-->
<!--
comment out
<script type="text/javascript">
functionDeleteListColor(){
varobj= document.getElementById('list_color');
varf = obj.form;
for (vari=0;i<f.length;i++) {
if(((f[i].type=="select-one")&(f[i]!=obj)){
f[i].selectedIndex=0;
}
}
}
</script>
-->
<!--- The simplification here below makes it look like a meaningless TABLE or submit -->
<!-- What I want to do is clear the list_color list when I change the list_car selection -->
<!--*After clearing -->
<FORM name="form_list_car" method="post" action="this.html">
<TABLE>
<CAPTION>1. Car Type List Box </CAPTION>
<TR>
<TD>
<SELECT name="list_car" onChange="DeleteListColor(list_color)">
<OPTION align="left" value="car1">CAR1</OPTION>
<OPTION align="left" value="car2">CAR2</OPTION>
<OPTION align="left" value="car3">CAR3</OPTION>
</SELECT>
</TD>
</TR>
</TABLE>
<!--In addition to clearing the color, there are many ways to use it, such as resetting the color to list_color to match the car model -->
<INPUT type="submit" name="submit_list_car" value="This sample is a recursive call button"/>
</FORM>
<BR>
<FORM name="form_list_color" method="post" action="next.html">
<TABLE>
<CAPTION>2. Car Color List Box</CAPTION>
<TR>
<TD>
<!-- Why size?It works only on personal computers.Pad or smartphone will be in one line -->
<SELECT name="list_color"size="3">
<OPTION align="left" value="red">Red</OPTION>
<OPTION align="left" value="yellow">Yellow</OPTION>
<OPTION align="left" value="black">Black</OPTION>
</SELECT>
</TD>
</TR>
</TABLE>
<INPUT type="submit" name="submit_list_color" value="Transition to next screen"/>
</FORM>
</DIV>
</BODY>
</HTML>
That's all.
javascript html
●Problems with the second and third DeleteListColor()
document.getElementById('list_color'), but there is no element in the document with the ID list_color.
A second <select> with id='list_color' or document.querySelector('select[name=list_color]') and so on.
●3rd DeleteListColor() Problem
If you resolve the above issue, this code is not what you want.Don't try to copy it without understanding how it works.
●Calling party problem
<SELECT name="list_car" onChange="DeleteListColor(list_color)">
The variable list_color does not exist, so I think there is an exception.Like the first problem, you must use getElementById() with an ID.
© 2024 OneMinuteCode. All rights reserved.