javascript - Hide all elements based on the item selected on dropdown -

-

here html:

<div id="drinks">     <select id="test">         <option data-tab="coffee">coffee</option>         <option data-tab="cold drinks">cold drinks</option>         <option data-tab="hot drinks">hot drinks</option>     </select>     <div class="section-wrapper">         <div class="row">             <section class="coffee">                 <h3>coffee </h3>                 <h4>coffee flavor</h4>             </section>         </div>         <div class="row">             <section class="cold drinks">                 <h3>cold drink</h3>                 <h4>cold drink</h4>             </section>         </div>         <div class="row">             <section class="hot drinks">                 <h3>hot drink</h3>                 <h4>hot drink</h4>             </section>         </div>     </div> </div>

javascript code:

$(document).ready(function() {     $("#test").on('load change', function() {           $("#test option").each(function() {             $("#drinks ." + $(this).val()).hide();         })         $("#drinks ." + $(this).val()).show();     }).change(); });

i want show class matches dropdown data-tab value. if coffee selected coffee's h3 , h4 tag should displayed. other drop-down. doing wrong ? here link fiddle.

https://jsfiddle.net/mmaharjan/onbusdhv/

you need make markup changes make easy.

like use value in option store option's value, in section use attribute store type. if use value in options, can current value reading select's value. if use class in section [space] considered separator in class, cold drinks mean 2 classes cold , drinks, easy use attribute selector(though can use class attribute attribute selector, better use attribute)

$(document).ready(function() {    $("#test").on('load change', function() {      $('#drinks .section-wrapper > section').hide().filter('[data-type="' + $(this).val() + '"]').show();    }).change();  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="drinks">    <select id="test">      <option value="coffee">coffee</option>      <option value="cold drinks">cold drinks</option>      <option value="hot drinks">hot drinks</option>    </select>    <div class="section-wrapper">      <section data-type="coffee">        <h3>coffee </h3>        <h4>coffee flavor</h4>      </section>      <section data-type="cold drinks">        <h3>cold drink</h3>        <h4>cold drink</h4>      </section>      <section data-type="hot drinks">        <h3>hot drink</h3>        <h4>hot drink</h4>      </section>    </div>  </div>  </body>


Comments

Post a Comment

Popular posts from this blog

Django REST Framework perform_create: You cannot call `.save()` after accessing `serializer.data` -

-
i have following viewset: class artistprofileviewset(viewsets.modelviewset): queryset = artistprofile.objects.all() serializer_class = artistprofileserializer def perform_create(self, serializer): if serializer.is_valid(): serializer.save() with following serializers: class simpleartisttrackserializer(serializers.hyperlinkedmodelserializer): class meta: model = artisttrack fields = (...my fields...) class artistprofileserializer(serializers.hyperlinkedmodelserializer): owners = userserializer(many=true, required=false) tracks = simpleartisttrackserializer(many=true, required=false) class meta: model = artistprofile fields = (...my fields...) i getting following error: assertionerror: cannot call `.save()` after accessing `serializer.data`.if need access data before committing database inspect 'serializer.validated_data' instead. i don't see editing serializer.data object. th...
Read more

Why does Go error when trying to marshal this JSON? -

-
i'm trying rather simple example of trying decode json file structs using golang. however, when attempting error that json: cannot unmarshal object go value of type []main.track which don't understand. here's code in question, , json can found here . package main import ( "encoding/json" "fmt" "net/http" "os" ) // tracks group of track types type tracks struct { tracks []track } // track represents singular track type track struct { name string url string artist artist } // artist represents single artist type artist struct { name string mbid string url string } func main() { url := "http://ws.audioscrobbler.com/2.0/?method=geo.gettoptracks&api_key=c1572082105bd40d247836b5c1819623&format=json&country=netherlands" response, err := http.get(url) if err != nil { fmt.printf("%s\n", err) os.exit(1) } de...
Read more