Ниспадающий список и jquery
Добрый вечер! Я делаю два ниспадающих списка. В первом списке при выборе определенного варианта скрываются списки, которые не относятся к выбранному варианту, а отображается тот список, который как раз и относится к выбранному варианту. Всё работает в Мозилле, но совсем не работает в ИЕ и Хроме(
Помогите разобраться в чем проблема. Коды с комментариями привожу ниже: <center><select name="vid"> <option id="first" value="1">первый вариант</option> <option id="second" value="2">второй вариант</option> </select></center> <center><font color="#FFFFFF">Выберите:</font></center> <center><select id="showfirst" name="size"> <option>68</option> <option>74</option> </select> <select id="showsecond" class="hPd" name="size"> <option>110</option> <option>116</option> </select> Класс hPd делает невидимым селект. Код JQuery:
$(function(){
$("#first").click(function(){
$("#showsecond").hide();
$("#showfirst").show();
});
$("#second").click(function(){
$("#showfirst").hide();
$("#showsecond").show();
$("#showpants").hide();
$("#showshoes").hide();
$("#showcaps").hide();
});
});
Догадываюсь, что суть проблемы заключается при клике на <option>, которые не ощущает ИЕ и Хром? Заранее благодарна=) |
<center><select name="vid">
<option value="1">первый вариант</option>
<option value="2">второй вариант</option>
</select></center>
<center><font color="#FFFFFF">Выберите:</font></center>
<center><select id="showfirst" name="size">
<option>68</option>
<option>74</option>
</select>
<select id="showsecond" class="hPd" name="size">
<option>110</option>
<option>116</option>
</select>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('[name="vid"]').change(function(){
if (this.value == 1 ) {
$("#showsecond").hide();
$("#showfirst").show();
} else if (this.value == 2 ) {
$("#showfirst").hide();
$("#showsecond").show();
$("#showpants").hide();
$("#showshoes").hide();
$("#showcaps").hide();
}
});
});
</script>
|
<style>
.hide {
display: none;
}
</style>
<select id="sel">
<option>первый вариант</option>
<option>второй вариант</option>
<option>третий вариант</option>
</select>
<div id="div">
<select>
<option>68</option>
<option>74</option>
</select>
<select class="hide">
<option>110</option>
<option>116</option>
</select>
<select class="hide">
<option>115</option>
<option>119</option>
</select>
<script>
window.onload = function () {
var sel = document.getElementById('sel');
var div = document.getElementById('div');
var curIndex = 0;
sel.onchange = function () {
div.children[curIndex].style.display = 'none';
curIndex = sel.selectedIndex;
div.children[curIndex].style.display = 'block';
}
}
</script>
|
Огромное спасибо!!!!
Всё работает!!! =) счастлива) |
Да реально помогло... все так просто на самом деле... Спасибо!!!
|
| Часовой пояс GMT +3, время: 15:13. |