Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.

JavaScript / DOM / AJAX: Parsing value from select menu?

Bottom of Page

1 to 3 of 3

  1.  
  1.  permalink
    Hi!
    I'm looking for JavaScript that can parse and write value from select menu as a text below! Something like that.
    <form>
    <select name="dept" size="1" onchange="update();">

    <option value="1">#1</option>
    <option value="2">#2</option>
    <option value="3">#2</option>
    </select>
    <p><script>update();</script></p>
    </form>
    Any ideas?

    Thank you in a advanced
    •  
      CommentAuthornifkin
    • CommentTimeJun 2nd 2006 edited
     permalink
    well, it's not difficult to hook into things like that with jQuery.

    assuming this (lightly modified) markup:

    &lt;form action="foo" method="get" id="myform"&gt;
    &nbsp;&nbsp;&lt;select name="dept" id="dept"&gt;
    &nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="1"&gt;Option One&lt;/option&gt;
    &nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="2"&gt;Option Two&lt;/option&gt;
    &nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="3"&gt;Option Three&lt;/option&gt;
    &nbsp;&nbsp;&lt;/select&gt;
    &lt;/form&gt;

    this (untested, but based on a bunch of working code I wrote yesterday) should do the deed.


    $(document).ready(function(){ // when the page is ready we make changes
    &nbsp;&nbsp;$('#dept').change(function(){ // when someone changes the selected option
    &nbsp;&nbsp;&nbsp;&nbsp;$('option',this).each(function(){ // flip through all the OPTION tags in #dept
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(this.selected){ // find the one that's selected
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('#myform').append('&lt;p&gt;You chose: '+$(this).text()+'&lt;/p&gt;');
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// append the text used to the end of the form
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
    &nbsp;&nbsp;&nbsp;&nbsp;});
    &nbsp;&nbsp;});
    });
  3.  permalink
    Hmm!
    It's first time I seeing it jQuery.
    I will try it.

    Thank you, DS

1 to 3 of 3

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page