Selecting Multiple Options creates Multiple Inputs

Question

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)

Its a dynamic select box, its populated based on the previous select box heh. — Dave Hunt, Aug 20 '09 at 19:37

score 1 · Answer 1 · answered Aug 20 '09 at 16:03

1

Just some quick thoughts.. Add a DIV under the Select Element.

using jQuery (or javascript) you can add a textbox for each select item add a textbox to the div. Something like:

var textboxString;
$("#SelectElement option:selected").each(function () {
                textboxString += "<input type='textbox' /><br>" // Add to this string as needed (Labels, css class, etx).
              });
$("#divElement").html(textboxString)

answered Aug 20 '09 at 16:03

WorthiGe

468
3
9

Hmm I'm having a hard time getting this to work, is there something else I'm forgetting to add here? – Dave Hunt Aug 20 '09 at 19:38

Peter Bailey · Accepted Answer · 2009-08-20T19:44:07.360

1

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>

edited Aug 20 '09 at 19:44

answered Aug 20 '09 at 16:27

Peter Bailey

105,256
31
182
206

I can't seem to get this to work either... is there something I'm forgetting? I've included the jQuery library.. – Dave Hunt Aug 20 '09 at 19:40
Changed example to full HTML page – Peter Bailey Aug 20 '09 at 19:44
Okay great, not sure what was wrong before but I got it working. I don't know jQuery so can you help me with one last tweak. I need to be able to limit which options selected create new boxes. So, if an option of value -1 or 0 is selected, a new textbox is not created. Anything else does. Thanks for your help! – Dave Hunt Aug 24 '09 at 16:31
Also is there any way to have other select forms trigger this to one to update? In regular javascript you'd use onChange="" and a function to update it. The reason for this is that the select table is dynamically populated, based on the input of the previous select table. If you go back and make changes to the previous select table, it doesn't update the jQuery, the previous inputs remain. – Dave Hunt Aug 24 '09 at 16:40
Yes, but you might be best served by asking that in a new question. – Peter Bailey Aug 24 '09 at 18:25

score 0 · Answer 3 · answered Aug 20 '09 at 16:13

With html like this:

<select id="number_of_inputs"> 
  <option>1</option> 
  <option>2</option> 
  <option>3</option> 
  <option>3</option> 
  <option>5</option> 
</select> 

<div id="inputs"></div>

You can use this jQuery:

$("#number_of_inputs").change(function() {
  var num = parseInt($(this).val());

  $("#inputs").html("");
  for(var i = 0; i < num; i++) {
    $("#inputs").append("<input type='text' /><br />");
  }
});

I actually like gw's JS better but here's another way to do it.

Selecting Multiple Options creates Multiple Inputs

3 Answers3