ansaurus

Question

Selecting Multiple Options creates Multiple Inputs

Answer 1

+1 A:

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)

WorthiGe 2009-08-20 16:03:12

Hmm I'm having a hard time getting this to work, is there something else I'm forgetting to add here?

Dave Hunt 2009-08-20 19:38:55

Answer 2

A:

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.

Andy Gaskell 2009-08-20 16:13:55

Answer 3

+1 A:

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"&gt;
<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"&gt;&lt;/script&gt;
<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>

Peter Bailey 2009-08-20 16:27:18

I can't seem to get this to work either... is there something I'm forgetting? I've included the jQuery library..

Dave Hunt 2009-08-20 19:40:08

Changed example to full HTML page

Peter Bailey 2009-08-20 19:44:14

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 2009-08-24 16:31:52

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 2009-08-24 16:40:47

Yes, but you might be best served by asking that in a new question.

Peter Bailey 2009-08-24 18:25:25

Answer 4

A:

Hi, i have to use code abode but it is not work:

 <select name="field_soure_default[value]" class="form-select" id="edit-field-soure-default-value" >

- None - choloco myamilo yahoo other >

and one text box:

<input type="text" name="field_source[0][value]" id="edit-field-source-0-value" size="60" value="" class="form-text required text" />

i have to change code abode:

$("#edit-field-soure-default-value").change(function() {

var num = parseInt($(this).val());

$("edit-field-source-0-value").html(""); for(var i = 0; i < num; i++) { $("edit-field-source-0-value").append("
"); } }); but it's not works.

and i am to change : $(function() { $('#edit-field-soure-default-value') .after( '' ) .find( 'option' ).each( function() { var $option = $(this); $option .data( '$input', $( '' + $option.text() + ':
').appendTo( '#edit-field-source-0-value' ).hide() ) .bind( 'toggle-input', function() { var $option = $(this); 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' ) ; }) ; }); and it's not work.

Please help!

2009-08-20 17:25:30

ansaurus

tags:

views:

answers:

Selecting Multiple Options creates Multiple Inputs

related questions