Как показать/скрыть div на основе выбора в раскрывающемся списке

Я знаю, что я не единственный человек с этой проблемой, но я еще не смог найти решение 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.

Заранее спасибо.


javascript html dropdown jquery show-hide
person digb    schedule 18.11.2015    source источник
comment
Добро пожаловать в СО! Обратите внимание, что это не служба написания кода, пожалуйста, добавьте к вопросу код, который вы написали сами, чтобы решить эту проблему. Во-вторых, вы не показали, как второй блок HTML каким-либо образом связан с первым или какое поведение вы ожидаете при каких событиях.   -  person Rory McCrossan    schedule 18.11.2015
comment
В следующий раз попробуйте также опубликовать свой код. А пока проверьте этот jsfiddle.net/9ch2wuvp.   -  person Nouphal.M    schedule 18.11.2015
comment
извините, я здесь новичок, и я очень плохо разрабатываю: / спасибо за решение! В следующий раз я также попытаюсь загрузить свой код в jsfiddle!   -  person digb    schedule 18.11.2015

Ответы (4)


arrow_upward
0
arrow_downward

вы можете использовать

$(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()
    });
});

Рабочая демонстрация

person Mohamed-Yousef    schedule 18.11.2015
comment
@digb добро пожаловать .. но, пожалуйста, не забудьте включить jquery, чтобы этот код работал .. Удачи :) - person Mohamed-Yousef; 18.11.2015
comment
Мне нравится, как это очень лаконично, и прекрасное использование селекторов, моя единственная критика заключается в том, что это полностью зависит от того, что div находится в том же порядке, что и выпадающие параметры. - person Shaun; 18.11.2015
comment
@Shaun красивое имя .. потому что мне нравится Shaun Murphy, он один из моих лучших игроков в снукер :) .. Я работал над тем, о чем просил OP .. так что это похоже на экзамен, попробуйте решить его? или пытаетесь реструктурировать его? :) .. Это то, что такое Stackoverflow .. у каждого свой код, а вы просто пытаетесь помочь - person Mohamed-Yousef; 18.11.2015
comment
Ха, я должен найти его! Абсолютно. Мне нравится, что ответ на самом деле был просто комментарием, и только прокомментирован, потому что в остальном это был отличный ответ, показывающий силу jQuery. Всего наилучшего. - person Shaun; 18.11.2015

arrow_upward
0
arrow_downward

пытаться:

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

arrow_upward
0
arrow_downward

Это ужасная практика кодирования - иметь так много разделов, если вы можете этого избежать. Представьте, что вам нужно изменить макет или другие изменения, вам нужно сделать это более 10 раз или изменить более 10 определений классов.

В вашем раскрывающемся списке есть только один выбор, так почему бы просто не сделать один div и не заменить содержимое?

У вас есть html, например:

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

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

Затем яваскрипт:

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

Пожалуйста, попробуйте в следующий раз, вы не научитесь, когда другие кодируют для вас. Единственный способ учиться — делать ошибки.

Это не использует jQuery, лично я считаю, что лучше изучить правильно, а затем использовать jQuery для удобства. Но это можно немного минимизировать с помощью jQuery, если вы предпочитаете.

person Shaun    schedule 18.11.2015
comment
извините, я здесь новичок, и я очень плохо разрабатываю: / спасибо за решение! В следующий раз я также попытаюсь загрузить свой код в jsfiddle! - person digb; 18.11.2015

arrow_upward
0
arrow_downward

Попробуй это:

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

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

});​
person toing_toing    schedule 18.11.2015