Home/ Questions/Q 320899
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T08:47:46+00:00

I have a select field in a form that allows you to select multiple

  • 0

I have a select field in a form that allows you to select multiple options.

I need to create a new input textbox for every number of options selected, automatically.

For example, if you select on option in the select box, one input will appear below it. If you select 5, 5 inputs will appear below it.

I’m not sure if this can be done in just straight Javascript, or if I’ll need to use jQuery or some other form of AJAX to get this done, but I’m not really sure how to approach this (I’m relatively new to using AJAX)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Well, jQuery was made just for this type of thing – i recommend using it to save yourself headaches.

    My take on it. 

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(function()
{
  $('#test')
    .after( '<div id="option-inputs"></div>' )
    .find( 'option' ).each( function()
    {
      var $option = $(this);
      $option
        .data( '$input', $( '<span>' + $option.text() + ': </span><input><br>').appendTo( '#option-inputs' ).hide() )
        .bind( 'toggle-input', function()
        {
          var $input  = $option.data( '$input' );
          if ( $option[0].selected )
          {
            $input.show();
          } else {
            $input.hide();
          }      
        })
        .bind( 'click', function()
        {
          $(this).siblings().andSelf().trigger( 'toggle-input' );
        })
        .trigger( 'toggle-input' )
      ;
    })
  ;
});


</script>

</head>
<body>

<select id="test" multiple="multiple">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

</body>
</html>
    • 0