如何根據下拉框選擇顯示/隱藏div

Question

我知道我不是唯一遇到此問題的人，但是我找不到JavaScript解決方案。

這是我的下拉選擇。 現在，我想為每個選項顯示一條特定的消息。

<select name="lehrberuf" id="lehrberuf" class="browser-default" required>
    <option value="" disabled selected class="grey-text">Lehrberuf</option>
    <option value="Anlagenfuehrer/-in EFZ">Anlagenführer/-in EFZ</option>
    <option value="Anlagen- und Apparatebauer/-in EFZ">Anlagen- und Apparatebauer/-in EFZ</option>
    <option value="Automatiker/-in EFZ">Automatiker/-in EFZ</option>
    <option value="Elektroinstallateur/-in EFZ">Elektroinstallateur/-in EFZ</option>
    <option value="Elektroplaner/-in EFZ">Elektroplaner/-in EFZ</option>
    <option value="Fachmann/-frau Betriebsunterhalt EFZ">Fachmann/-frau Betriebsunterhalt EFZ</option>
    <option value="Informatiker/-in EFZ">Informatiker/-in EFZ</option>
    <option value="Kauffrau / Kaufmann EFZ">Kauffrau / Kaufmann EFZ</option>
    <option value="Konstrukteur/-in EFZ">Konstrukteur/-in EFZ</option>
    <option value="Kunststofftechnologe/-technologin EFZ">Kunststofftechnologe/-technologin EFZ</option>
    <option value="Laborant/-in EFZ Fachrichtung Chemie">Laborant/-in EFZ Fachrichtung Chemie</option>
    <option value="Logistiker/-in EFZ Fachrichtung Lager">Logistiker/-in EFZ Fachrichtung Lager</option>
    <option value="Mediamatiker/-in EFZ">Mediamatiker/-in EFZ</option>
    <option value="Polymechaniker/-in EFZ">Polymechaniker/-in EFZ</option>
</select>

這應該是每個選項的消息。

<div class="row col s12">
    <div class="hiddenmessage1">You have to select <strong>any one option</strong> so i am here</div>
    <div class="hiddenmessage2">You have selected <strong>red option</strong> so i am here</div>
    <div class="hiddenmessage3">You have selected <strong>green option</strong> so i am here</div>
    <div class="hiddenmessage4">You have selected <strong>blue option</strong> so i am here</div>
    <div class="hiddenmessage5">You have selected <strong>blue option</strong> so i am here</div>
    <div class="hiddenmessage6">You have selected <strong>blue option</strong> so i am here</div>
    <div class="hiddenmessage7">You have selected <strong>blue option</strong> so i am here</div>
    <div class="hiddenmessage8">You have selected <strong>blue option</strong> so i am here</div>
    <div class="hiddenmessage9">You have selected <strong>blue option</strong> so i am here</div>
    <div class="hiddenmessage10">You have selected <strong>blue option</strong> so i am here</div>
    <div class="hiddenmessage11">You have selected <strong>blue option</strong> so i am here</div>
    <div class="hiddenmessage12">You have selected <strong>blue option</strong> so i am here</div>
    <div class="hiddenmessage13">You have selected <strong>blue option</strong> so i am here</div>
    <div class="hiddenmessage14">You have selected <strong>blue option</strong> so i am here</div>
</div>

我需要有關JS的幫助。

先感謝您。

Answer 1

嘗試：

 $('#lehrberuf ').on('change',function(){
   var index = $('#lehrberuf option').index($(this).find(':selected'));
 console.log(index);
   $('.hiddenmessage'+(index+1)).toggle();
});

Answer 2

您可以使用

$(document).ready(function(){
    $('#lehrberuf').on('change',function(){
        var getIndex = $(this).find('>option:selected').index();
        $('.row > div').hide(); // you can use slideDown() or fadeOut() instead of .hide()
        $('.row > div').eq(getIndex).show(); // you can use slideUp() or fadeIn() instead of .hide()
    });
});

工作演示

Answer 3

如果可以避免的話，有這么多的div是一種糟糕的編碼實踐。 假設您需要更改布局或其他更改，您必須執行10次以上或更改10次以上的類定義。

您的下拉菜單只有一個選項，那么為什么不只有一個div並替換內容呢？

您有html之類的代碼：

<select onchange="showText(this)">
   <option value="my text">text</option>
<select>

<div id="dvContent">select an option!</div>

然后javascript：

<script>
  function showText(dd) {
     var sel = dd.options[dd.selectedIndex].value,
     dv = document.getElementById("dvContent");
     dv.innerHTML = sel.value;
  }
 </script>

請下次再試一次，其他人不會為您編碼。 學習的唯一方法就是犯錯誤。

這不是使用jQuery ，我個人認為最好是正確學習然后再使用jQuery以方便使用。 但是如果您願意，可以使用jQuery將其最小化。

Answer 4

嘗試這個：

$('#lehrberuf').change(function() {

    var selected_index = $('#lehrberuf option:selected').index();
var text_in_div = $('#messages > div:eq('+selected_index+')').text();
alert(text_in_div);

});​