在選擇表單中選擇不同的選項並顯示不同的內容

Question

我有一個表單，需要使用不同選項的「選擇」。每當有人點擊某個選項時，都會顯示不同的內容。這是我的解決方案（它工作:)），但正如你可以看到的代碼的長度，這是一個非常複雜的。我想用jQuery會更容易些？

HTML

<select onchange="optionCheck()" id="options" > 
    <option>ABC</option> 
    <option>XYZ</option> 
</select> 

<div id="showMoreContent1" class="hiddenContent">Content1 goes here</div> 
<div id="showMoreContent2" class="hiddenContent">Content2 goes here</div> 

JS

<script> 
    function optionCheck() { 
     selectOptions = document.getElementById("options"); 

     helpDiv1 = document.getElementById("showMoreContent"); 
     helpDiv2 = document.getElementById("showMoreContent2"); 

     if (selectOptions.options[1].selected) { 
      helpDiv1.className = "visibleContent"; 
     } else { 
      helpDiv1.className = "hiddenContent"; 
     } 
     if (selectOptions.options[2].selected) { 
      helpDiv2.className = "visibleContent"; 
     } else { 
      helpDiv2.className = "hiddenContent"; 
      } 
     } 
</script> 

CSS

<style> 
    .hiddenContent {display: none;} 
    .visibleContent {display: block;}​ 
</style> 

Answer 1

如果我正確理解你的問題，你可以做的jQuery以下，以獲得相同的結果

<select id="options" > 
    <option>--</option> 
    <option value="abc">ABC</option> 
    <option value="xyz">XYZ</option> 
</select> 

<div id="content-abc" class="content hidden">Content1 goes here</div> 
<div id="content-xyz" class="content hidden">Content2 goes here</div> 

$(document).ready(function(){ 
    $("#options").change(function(){ 
     $(".content").addClass("hidden"); 
     $("#content-"+$(this).val()).removeClass("hidden"); 
    }); 
}); 

http://jsfiddle.net/mG3uC/

Answer 2

我覺得開始的方式將這個小腳本：

HTML：

<select id="options" > 
    <option data-item="showMoreContent1">ABC</option> 
    <option data-item="showMoreContent2">XYZ</option> 
</select> 

<div id="helpPanel"> 
    <div id="showMoreContent1" class="hiddenContent">Content1 goes here</div> 
    <div id="showMoreContent2" class="hiddenContent">Content2 goes here</div> 
</div> 

的JavaScript：

$(document).ready(function(){ 
    $('#options').change(function(){ 
     $('#helpPanel div').hide(); 
     $("#options option:selected").each(function() { 
      var targetDiv = $(this).attr("data-item"); 
      $('#'+targetDiv).show(); 
     }); 
    }); 
}); 

而且與jsFiddle在那裏你可以測試我還是你的代碼。

Answer 3

的jsfiddle LINK：http://jsfiddle.net/DDdJK/

HTML

<select id="options" > 
    <option>ABC</option> 
    <option>XYZ</option> 
</select> 

<div id="showMoreContent1" class="hiddenContent">Content1 goes here</div> 
<div id="showMoreContent2" class="hiddenContent">Content2 goes here</div> 

CSS

.hiddenContent { 
    display: none; 
} 

JQuery的

$('#options').change(function(){ 
    if ($(this)[0].options[0].selected) { 
     $("#showMoreContent1").show(); 
     $("#showMoreContent2").hide(); 
    } 
    if ($(this)[0].options[1].selected) { 
     $("#showMoreContent2").show(); 
     $("#showMoreContent1").hide(); 
    } 
}); 

Answer 4

怎麼樣

HTML：

<select id="options" > 
    <option value="1">ABC</option> 
    <option value="2">XYZ</option> 
</select> 

<div id="showMoreContent1" class="hiddenContent">Content1 goes here</div> 
<div id="showMoreContent2" class="hiddenContent">Content2 goes here</div> 

JS：

$(document).ready(function(){ 
    $('#options').change(function(){ 
     $('.hiddenContent').hide(); 
     $('#showMoreContent' + $(this).val()).show(); 
    }); 
}); 

CSS

<style> 
    .hiddenContent {display: none;} 
</style>