jquery on select change hide/show div

Question

I have this select drop-down where in my drop-down when i select one of the choices the div for that particular choice will be displayed and the rest will remain hidden.

I tried using this Demo but it don't work.

   <form id="nl-form" class="nl-form">
    <select id="choices">
        <option value="family" selected>family</option>
        <option value="closefriend">close friend</option>
        <option value="acquaintance">acquaintance</option>
    </select>
    <div class="nl-overlay"></div>
    </form>

     <div id="family" class="chosentree">family</div>
     <div id="closefriend" class="chosentree">closefriends</div>
     <div id="acquaintance" class="chosentree">acquaintance</div>

    $(function() {
    $('.chosentree').hide();

    $('#choices').change(function(){
         //$('.chosentree').hide();
         $('#' + $(this).val()).show();
     });
    }); 

What could be the problem?

and also on the div family, I want to place this ff. Demo how should it be done? Notice that it has a link script file check external sources in jsfiddle

I'm new with this and I don't know what should be the proper placing of codes.

Answer 1

your code need

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>// you can add what ever is latest version available.

since you have written change event better add a dummy select option like:

<option value="select" selected>select</option>

otherwise it is working.

Here is your working demo after loading above library

FiddleDemo

Answer 2

I solved it by putting

$(this.elOriginal).find('option').removeAttr("selected");
                    $(this.elOriginal).find('option:eq('+this.selectedIdx+')').attr("selected", "selected");
                    $(this.elOriginal).trigger('change');

in close function in nlform.js

Then by listening to change event of the select element I get my goodies!

Answer 3

Not sure if this is still relevant, but nl-form doesn't actually use the select inputs. If you observe the page in Firebug, you'll notice the actual Select elements have a visibility of "none". What nl-form does is actually take the options in the select that you create and turns them into a series of different html elements (div, a, and ul elements). So when you change an option on an nl-form select, you cannot listen for the change event because it doesn't actually happen.

It turns out it's not real easy or fun to do. What I did to monitor the changes was create a custom event at the bottom of the close() method in nlform.js . Then in my javascript, I listened for that particular event and had to write a lot of javascript to find the elements I needed...it did eventually work. It's a lot of work though.