jQuery的 - 控制div可見一個選擇框

更新：我想控制基礎上，選擇頂部的價值底部的div的可見性..jQuery的 - 控制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>

來源

2011-10-04 patrick

如果divs都在某種容器中，使用jQuery選擇器會更容易一些。他們周圍是否有容器？ –

您的HTML無效。元素標識必須是唯一的。他們不能都有'id =「petinfo」'。但是，他們都可以擁有'class =「petinfo [dog | cat | fish]」'。 – gilly3

HTML更正;仍然似乎無法找到完成它的方式 - 爲窮人道歉HTML – patrick

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

來源

2011-10-04 22:52:00

onchange事件不會在div上觸發。 –

好抓，我把它移到它所屬的選擇:) –

欣賞它約書亞..該功能如何才能顯示匹配的值的DIVS ..我更新了問題，以更好地反映我在找什麼完成..讚賞你答案和時間 - – patrick

試試這個

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

但對於這一點，你應該改變你的類名相匹配的選項的值。你也需要給你的「選擇」元素一個ID。

編輯：爲了澄清一點，這個選擇器將嘗試找到選擇元素的ID「寵物」，所以你需要添加ID =「寵物」。名稱和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>

來源

2011-10-04 22:52:34

jQuery的 - 控制div可見一個選擇框

回答

相關問題