Jquery - remove class only when item is active

Question

I wrote simple jQuery switch where specific div is displayed based on user selection. It is working but i don't like this solution. Can you suggest me how can i handle hiding this div's on change ? Now i simple add $(".city").addClass('hide'); to each case but there must be some better solution which will handle on change event or something.

Here is working example: http://codepen.io/anon/pen/OyOgGK

Thank you for your help

Answer 1

You can do it all in one line, without specifically targeting each city div:

$('#myList').change(function() {
    $('.city').hide().eq($(this)[0].selectedIndex - 1).show();
});

Proof of Concept

 $('#myList').change(function() { $('.city').hide().eq($(this)[0].selectedIndex - 1).show(); }); 

 .city { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <legend>Selecting elements</legend> <p> <label>Select city</label> <select id="myList" > <option value="0">--</option> <option value="2">Belo <option value="1">Florianópolis</option> <option value="2">Belo Horizonte</option> <option value="3">Goiânia</option> <option value="4">Salvador</option> </select> </p> <div id="fl" class="city"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis auctor nisl tincidunt euismod. Integer dapibus urna eget dolor egestas, a efficitur felis fermentum. Vestibulum fringilla felis vel augue tempus, id efficitur tellus mattis. Nullam gravida felis est, non cursus libero tempor sit amet. Aenean cursus facilisis hendrerit. Proin eget purus quis est maximus lobortis. Nulla facilisi. Nunc a lobortis augue, at lacinia enim. Pellentesque eget sagittis velit. Vivamus sed erat nec sem maximus faucibus a rutrum ligula. Curabitur maximus eros id nisi tristique volutpat sed nec magna. Duis dapibus metus et nunc eleifend porttitor. Cras mattis porta malesuada. Fusce rutrum nulla quis magna consectetur, vitae blandit nibh maximus. Fusce dapibus, diam eu hendrerit tincidunt, metus enim lobortis dui, a blandit leo urna quis odio. In tincidunt lacinia rutrum. </p> </div> <div id="be" class="city"> <p> Proin egestas, nulla vitae aliquet porttitor, ipsum turpis aliquet lectus, sed faucibus tellus erat quis orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam ut auctor purus, in dictum nisi. Morbi vulputate enim sed tincidunt tempor. Morbi sollicitudin eros vel purus tincidunt luctus. Nunc nunc dolor, gravida et ipsum a, tempus hendrerit lorem. Ut convallis fermentum diam a posuere. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque aliquam enim non quam molestie consequat. Vivamus cursus vel ex eget egestas. Nulla vitae vulputate quam. </p> </div> <div id="go" class="city"> <p> Nam at metus eleifend, vulputae nunc ac, mollis ipsum. Aenean hendrerit commodo tellus in fermentum. Curabitur rutrum massa at nunc aliquam lobortis. Donec euismod mattis nulla, vitae viverra arcu cursus ac. Cras nulla mi, accumsan vitae odio nec, mollis ullamcorper lectus. Nulla id diam malesuada, bibendum nulla a, lacinia lacus. Etiam sit amet mi condimentum, ultrices purus nec, dictum nisl. Vivamus enim elit, rhoncus vel quam vitae, sagittis porttitor sapien. Vestibulum egestas sagittis nisl vel dignissim. In dapibus, sapien id rutrum molestie, metus turpis tempus mauris, eu vulputate ex purus vulputate urna. Praesent non dictum elit. Nam vel urna sapien. Aenean sodales, lorem at ullamcorper sollicitudin, nisi ante laoreet nisi, nec volutpat ligula mauris at orci. Mauris libero ante, tincidunt at ante eget, congue suscipit metus. Nam eros libero, ultricies ut rutrum sed, euismod ac nisl. Praesent interdum urna sed vulputate auctor. </p> </div> <div id="sa" class="city"> <p> Suspendisse mollis mauris id mauris maximus, at vestibulum leo malesuada. Pellentesque nec interdum lectus, sed rhoncus sapien. Vivamus tincidunt felis quam, et faucibus turpis condimentum non. Sed at posuere ligula. Maecenas euismod massa a lorem pulvinar molestie. Vestibulum ipsum turpis, consectetur non eros vel, condimentum ornare sapien. Integer a molestie justo. Ut in scelerisque erat, ut tempor lacus. Integer tempus lorem non eros sollicitudin, ac fringilla dui maximus. Mauris tortor tellus, rutrum ac orci ac, ornare vulputate nulla. Ut nisl odio, porttitor eget varius eu, malesuada ac sapien. Suspendisse accumsan eros non nunc dapibus, vel vehicula nisi aliquet. Aliquam erat volutpat. Phasellus tincidunt pellentesque diam, ut egestas ipsum fringilla a. Proin ac vestibulum augue. Aenean mi massa, hendrerit vitae efficitur vitae, cursus nec velit. </p> </div> 

Answer 2

While mevius's one-liner is short, I believe the readability suffers for its brevity.

Here's a CodePen with my take on the solution.

First, I removed the onclick attribute from your markup and changed the values to be more useful for targeting:

<select id="myList">
  <option value="">--</option>
  <option value="fl">Florianópolis</option>
  <option value="be">Belo Horizonte</option>
  <option value="go">Goiânia</option>
  <option value="sa">Salvador</option>
</select>

Instead I registered the listener via jQuery:

$(document).ready(function(){

  $('.city').hide(); // hide all the cities at the start
  $('#myList').change(updateDisplay);

  function updateDisplay(event){
    var selected = $(event.target).val();
    $('.city').hide();

    // this will target #fl if Florianópolis is selected
    $('#' + selected).show();
  }
});

Answer 3

Considering than you do $(".city").addClass('hide'); multiple times you might want to pull that out of the switch statement. Also if you set the value of the options to match the id of the elements (ie 'be') you could make the entire function something like this:

function myfunction() {
  $(".city").addClass('hide');
  $("#" + document.getElementById("myList").value).removeClass('hide');
}

There are lots of ways that would do it with more JavaScript or templating but this is probably a good start. The above doesn't require you to have the value match the index by which the jQuery expression will match your divs which to me seems like something that'd be harder to maintain.