#javascript #select #dynamic #dom-events
#javascript #выберите #динамический #dom-события
Вопрос:
Следующий код отлично работает при манипулировании параметрами в поле выбора, но он не работает, когда я помещаю его в форму. Пожалуйста, помогите.
<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 amp; Supplies| Accessories';
categories['Books amp; Magazines'] = 'eBooks| Audio Books| Books| Magazines';
categories['Business amp; 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>
</head>
<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 amp; Magazines</option>
<option value="">Business amp; Career</option>
<option value="">Apparel</option>
</select>
</br>
</br>
<select id="subcat" style="width:200px; " disabled="true">
</select>
</body>
</html>
Ответ №1:
Похоже, это проблема с коллизией имен. Вы назвали и функцию JavaScript, и Select одним и тем же именем, т.е. subcat. Назовите каждый из них уникально, чтобы не было двусмысленности при разрешении имен. например
<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 amp; Supplies| Accessories';
catogeries['Books amp; Magazines'] = 'eBooks| Audio Books| Books| Magazines';
catogeries['Business amp; 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 amp; Magazines</option>
<option value="">Business amp; Career</option>
<option value="">Apparel</option>
</select>
</br>
</br>
<select id="subcat" style="width:200px; " disabled="true">
</select>
</form>
</body>
</html>
Обратите внимание, что я включил selects в элемент формы и переименовал функцию JavaScript в GetSubCategories().