顯示與隱藏內容的基礎上選擇值

我有一個HTML代碼顯示與隱藏內容的基礎上選擇值

<select class="selectOption"> 
    <option>Analytics</option> 
    <option>Translation</option> 
    <option>Poll</option> 
</select> 

<div id="changingArea"> 
    <div id="Analytics" class="desc">Analytics</div> 
    <div id="Translation" class="desc">Translation</div> 
    <div id="Poll" class="desc">Poll</div> 
</div>

的CSS

.desc {display: none;}

的js

$(function(){ 
     $('.selectOtion').change(function(){ 
     var selected = $(this).find(':selected').text(); 
     $(".desc").hide(); 
     $('#' + selected).show(); 
     }); 
});

現在的問題是，所有的div元素是隱藏在頁面加載中。我想默認顯示第一個選項的值，當更改div的內容也是變化。

例 http://jsfiddle.net/bsqVm/

編輯：

謝謝你們的幫助

首先是在我的代碼一個錯字，所以 'selectOtion' 應該是 'selectOption'

其次，爲了使默認選擇顯示，我們可以觸發DOMReady上的更改事件爲'未定義'解決方案

所以JavaScript是

$(function(){ 
     $('.selectOption').change(function(){ 
     var selected = $(this).find(':selected').text(); 
     //alert(selected); 
     $(".desc").hide(); 
     $('#' + selected).show(); 
     }).change() 
});

或

$(function(){ 
    $('#Analytics').show(); // Will show the div 
    $('.selectOption').change(function(){ 
    var selected = $(this).find(':selected').text(); 
    //alert(selected); 
    $(".desc").hide(); 
    $('#' + selected).show(); 
    }); 
});

來源

2012-10-17 Ahmad Ajmi

。在你的代碼中的錯字selectOtion應該selectOption。要根據選定的值顯示div，您可以在DOMReady上觸發更改事件。

$(function(){ 
    $('.selectOption').change(function(){ 
     var selected = $(this).find(':selected').text(); 
     $(".desc").hide(); 
     $('#' + selected).show(); 
    }).change() 
});

http://jsfiddle.net/XCUDF/

來源

2012-10-17 10:45:30 undefined

謝謝你是完美的，它的工作原理！ –

有在你的代碼

$(function(){ 
     $('.selectOption').change(function(){ 
     var selected = $(this).find(':selected').text(); 
     $(".desc").hide(); 
     $('#' + selected).show(); 
     }); 
});

變化$('.selectOtion')到$('.selectOption')

一個錯字我已經更新您的提琴做工精細現在看看

http://jsfiddle.net/bsqVm/4/

來源

2012-10-17 10:46:19 rahul

對不起，由於rahul –

@AhmadAjmi歡迎 – rahul

試試這個：jsfiddle

自動呼叫事件往往是最簡單的做法...

來源

2012-10-17 10:47:44

Thsnks烤，自動呼叫活動是什麼我失蹤 –

您可以添加此行顯示負載該分區：

$(function(){ 
     $('#Analytics').show(); // Will show the div 
     $('.selectOption').change(function(){ 
     var selected = $(this).find(':selected').text(); 
     //alert(selected); 
     $(".desc").hide(); 
     $('#' + selected).show(); 
     }); 
});

這裏的DEMO

來源

2012-10-17 10:51:01 Niklas

感謝Zalk爲您的幫助 –

爲了確保您將始終顯示正確的div，更好地爲所有選項賦予價值，即使它與在文本中的文本相同選項，因爲如果您有多種語言，西班牙語中的「分析」會有不同的文字。所以最好使它像這樣：

<select class="selectOption"> 
    <option value="Analytics">Analytics</option> 
    <option value="Translation">Translation</option> 
    <option value="Poll">Poll</option> 
</select> 

$(function(){ 
     $('#Analytics').show(); // Will show the div 
     $('.selectOption').change(function(){ 
     var selected = $(this).val(); //may store it in a variable 
     //alert(selected); 
     $(".desc").hide(); 
     //$('#'+selected).show(); 
     $('#' + $(this).val()).show(); //or u can just use obj value in selector to save coding 
     }); 
});

來源

2012-10-17 13:22:09

顯示與隱藏內容的基礎上選擇值

回答

相關問題