Accessing form elements_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-07 16:13 出处：网络

The following code is working fine in manipulating options in the select box, but its not working when I put it in the form. Please Help.

<html>
<head>
<title>Category list</title>
<script type="text/javascript">
var categories=new Object();

categories['Accessories'] = 'Cosmetics/Perfumes|Jewellery|Handbags|Shoes|Watches';
categories['Entertainment/Media'] = 'Videos/Movies|Art|Photo|News|Television|Music';
categories['Automobile'] = 'Cars| Motorcycles| Tools & Supplies| Accessories';
categories['Books & Magazines'] = 'eBooks| Audio Books| Books| Magazines';
categories['Business & Career'] = 'Real Estate| Office| Productivity Tools| Employment| B-TO-B| Marketing';
categories['Apparel'] = 'Childrens| Mens| Womens';

function subcat(elem)
{
 var catarr;
 var subb=document.getElementById("subcat");
 subb.disabled=false; 
 subb.length=0;
 var cat=elem.options[elem.selectedIndex].text;
 
 if(categories[cat])
 {
   
  catarr=categories[cat].split('|');
  subb.options[0]=new Option('select subcat',' ');
  for(var i=0; i<catarr.length; i++)
  {
     subb.options[i+1]=new Option(catarr[i],catarr[i]);
  }
  
 }
 
}
</script>
</hea开发者_运维问答d>
<body>
<select id="cat" onChange="subcat(this,subcat)" style="width:200px;">
<option value="" selected="selected">Select Category</option>
<option value="">Accessories</option>
<option value="">Entertainment/Media</option>
<option value="">Automobile</option>
<option value="">Books & Magazines</option>
<option value="">Business & Career</option>
<option value="">Apparel</option>


</select>
</br>
</br>
<select id="subcat" style="width:200px; " disabled="true">

</select>
</body>
</html>

This seems to be a name collision problem. You have named both the JavaScript function and the Select with the same name i.e. subcat. Name each of these uniquely so there is no ambiguity in resolving the names. e.g.

<html>
<head>
<title>Catogery list</title>
<script type="text/javascript">
var catogeries=new Object();

catogeries['Accessories'] = 'Cosmetics/Perfumes|Jewelry|Handbags|Shoes|Watches';
catogeries['Entertainment/Media'] = 'Videos/Movies|Art|Photo|News|Television|Music';
catogeries['Automobile'] = 'Cars| Motorcycles| Tools & Supplies| Accessories';
catogeries['Books & Magazines'] = 'eBooks| Audio Books| Books| Magazines';
catogeries['Business & Career'] = 'Real Estate| Office| Productivity Tools| Employment| B-TO-B| Marketing';
catogeries['Apparel'] = 'Childrens| Mens| Womens';

function GetSubCategeries(elem)
{

 var catarr;
 var subb=document.getElementById("subcat");

 subb.disabled=false; 
 subb.length=0;
 var cat=elem.options[elem.selectedIndex].text;

 if(catogeries[cat])
 {

  catarr=catogeries[cat].split('|');
  subb.options[0]=new Option('select subcat',' ');
  for(var i=0; i<catarr.length; i++)
  {
     subb.options[i+1]=new Option(catarr[i],catarr[i]);
  }

 }

}
</script>
</head>
<body>
<form>
<select id="cat" onChange="GetSubCategeries(this,subcat)" style="width:200px;">
<option value="" selected="selected">Select Catogery</option>
<option value="">Accessories</option>
<option value="">Entertainment/Media</option>
<option value="">Automobile</option>
<option value="">Books & Magazines</option>
<option value="">Business & Career</option>
<option value="">Apparel</option>


</select>
</br>
</br>
<select id="subcat" style="width:200px; " disabled="true">

</select>
</form>
</body>
</html>

Notice I have included the selects in a Form element and renamed the JavaScript function to GetSubCategories().