Question

更新：我想根据顶部SELECT的值来控制底部div的可见性..

即

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>

Answer 1

试试这个

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

但为此，您应该更改您的类名以匹配选项的值。您还需要为“select”元素添加ID。

编辑：为了澄清一点，这个选择器将尝试通过其ID“pets”找到select元素，因此您需要添加id =“pets”。名称和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>

Answer 2

<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>

jQuery - 使用选择框控制div可见性

2 个答案: