CODEWITHSUNDEEP
javascriptjqueryforms
Mike Smith
Mike Smith

Reputation: 11

JavaScript Select Menu With Javascript

I am creating a form which i would like to have a very specific functionality.

The form asks presents a select menu which has a number of values like this:

Now, when the user selects the "Other.." value i would like an input box to appear where the user can input the type of value.

How would i go about hiding and showing form elements depending on whether or not a particular choice has been selected from a select menu?

I am using JQuery if that could help.

Thanks for any input.

Upvotes: 0

Views: 786

Answers (7)

Swarup Kumar
Swarup Kumar

Reputation: 15

Use this code for selected menu item design.

http://commixturesoft.com/js/jquery-1.8.0.min.js

       <script type="text/javascript">

            $(function ()     {

            var menu_ul = $('.menu > li > ul'),

            menu_a = $('.menu > li ');

            menu_a.click(function (e) {


            if (!$(this).hasClass('current')) {

            menu_a.removeClass('current');
            $(this).addClass('current');
             } 

            else {
            $(this).removeClass('current');

       }
    });

});
</script>


 <ul class="menu">


<li class="subnav-follower current">
  <a  href="#">Time</a>

</li>


<li class="subnav-follower">
  <a  href="#">Files</a>
</li>



<li class="subnav-follower" >
  <a  href="#">Tools</a>
</li>


<li class="subnav-follower">
  <a  href="#">Fields</a>
</li>

Upvotes: 0

wdm
wdm

Reputation: 7189

I'm using visibility:hidden to hide the input field but display:none is also an option.

The input field will appear when 'Other' is selected and hide if it changes.

Demo: http://jsfiddle.net/wdm954/nZNrE/

$('#a').change(function() {
    if ( $(this).val() == 'other') $('.other').css('visibility', 'visible');
    else $('.other').css('visibility', 'hidden');
});

Upvotes: 0

Shawn Chin
Shawn Chin

Reputation: 86894

A fiddle for you : http://jsfiddle.net/uE3KW/

Essentially, you want to bind a function to the change event of <select>. In the function you can checks the value of $(this).val() to see which option was selected. You can then use .hide() and .show() to control the visibility of your input box.

Upvotes: 0

Shaun Hare
Shaun Hare

Reputation: 3871

On select change show area containing input

$("select").change(function () {

          $("select option:selected").each(function () {
              var AreaToShow = $('#otherinput')
             if( $(this).text()) =='other')
                {
                   AreaToShow.show();
                 }
               else
                {
                    AreaToShow.hide();
              });
});

where html something like 

<select >
<option> etc...

<p id="AreaToShow"><label for='inputname'><input etc ....

Upvotes: 0

Jack Edmonds
Jack Edmonds

Reputation: 33171

First give the select menu HTML element an id. For example:

<select id="type" ...

Then add the following JavaScript code

<script type="text/javascript">
    $(document).ready(function(){
        $("#type").change(function(){
            if ($("#type").val()=="Other...")
                $("#type").after($("<input type='text' name='other' id='other'/>"));
            else
                $("#other").remove();
        }
    }
</script>

Upvotes: 0

glortho
glortho

Reputation: 13198

$('select').change( function() {
    if ( $('option:selected', this).val() == 'Other...' ) {
        $('input#hidden').show(); // hidden would be the id of the input text element you want to show and hide
    } else {
        $('input#hidden').hide();
    }
}

Upvotes: 1

Kevin Bowersox
Kevin Bowersox

Reputation: 94469

Check out this JS Fiddle it may show what you want: http://jsfiddle.net/teQyY/

<select id="selChoice">
    <option>Integer</option>
    <option>String</option>
    <option>Double</option>
</select>
<div id="divDouble">
    Please enter your Double: <input/>
</div>
<div id="divInteger">
    Please enter your Integer: <input/>
</div>
<div id="divString">
    Please enter your String: <input/>
</div>

$("#divDouble").toggle(false);
 $("#divInteger").toggle(false);
   $("#divString").toggle(false);
$("#selChoice").change(function(){
    if($(this).val() == "Integer")
    {
        $("#divDouble").toggle();
    }
    else if($(this).val() == "String")
    {
        $("#divString").toggle();
    }
    else if($(this).val() == "Integer")
    {
        $("#divString").toggle();
    }
});

Upvotes: 0

Related Questions