Блог

Обновлено: я хотел бы контролировать видимость нижних разделов на основе значения верхнего выбора..

то есть

 selected = dogs:: only bulldog, pitbull visible
selected = fish:: GOLDFISH! visible
  

и т.д..

Ценю это .. Извините, я не смог лучше объяснить свой вопрос изначально —

 <select>
  <option value="dog">dog</option>
  <option value="cat">cat</option>
  <option value="fish">fish</option>
</select>

<div id="dog">bulldog</div>
<div id="cat">stray cat</div>
<div id="dog">pitbull</div>
<div id="cat">alley cat</div>
<div id="fish">GOLDFISH!</div>
  

Попробуйте это

 $('#pets').change(function() {
    $('#somepets div').hide();
    $('#somepets div.'   $(this).val()).show();
});
  

Но для этого вы должны изменить имена своих классов, чтобы они соответствовали значениям параметров. Также вам необходимо присвоить своему элементу «select» идентификатор.

РЕДАКТИРОВАТЬ: чтобы немного прояснить, этот селектор попытается найти элемент выбора по его идентификатору «домашние животные», поэтому вам нужно добавить id =»домашние животные». Имя и идентификатор могут иметь одно и то же значение.

РЕДАКТИРОВАТЬ: поскольку у вас возникли некоторые проблемы с HTML, вот как это должно выглядеть для работы с моим методом.

 <select id="pets">
  <option value="dog">dog</option>
  <option value="cat">cat</option>
  <option value="fish">fish</option>
</select>

<div id="somepets">
  <div class="dog">bulldog</div>
  <div class="cat">stray cat</div>
  <div class="dog">pitbull</div>
  <div class="cat">alley cat</div>
  <div class="fish">GOLDFISH!</div>
</div>
  

 <script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript">
function selectionChanged(){
HideAll();
var selected=$('#pets option:selected').text();
var selectString='.';
selectString =selected;
$(selectString).show();
};
function HideAll(){
$('.dog').hide();
$('.cat').hide();
$('.fish').hide();
};
</script>

<select id="pets" onchange="selectionChanged()">
    <option>dog</option>
    <option>cat</option>
    <option>fish</option>
  </select>

<div id=somepets>
  <div class="dog">bulldog</div>
  <div class="cat">stray cat</div>
  <div class="dog">pitbull</div>
  <div class="cat">alley cat</div>
  <div class="fish">GOLDFISH!</div>
</div>