Выбор нескольких параметров создает несколько входов - PullRequest
Новая
       20

Выбор нескольких параметров создает несколько входов

0 голосов
/ 20 августа 2009

У меня есть поле выбора в форме, которая позволяет выбирать несколько вариантов.

Мне нужно автоматически создать новое текстовое поле для каждого числа выбранных опций.

Например, если вы выберете опцию в поле выбора, под ним появится один вход. Если вы выберете 5, под ним появятся 5 входов.

Я не уверен, что это можно сделать просто в Javascript, или мне нужно будет использовать jQuery или какую-то другую форму AJAX, чтобы сделать это, но я не совсем уверен, как к этому подойти Я относительно новичок в использовании AJAX)

Ответы [ 3 ]

1 голос
/ 20 августа 2009

Ну, jQuery был создан именно для этого типа вещей - я рекомендую использовать его, чтобы избавить себя от головной боли.

Мой взгляд на это. 

<!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>
1 голос
/ 20 августа 2009

Просто несколько быстрых мыслей .. Добавьте DIV под элемент выбора.

используя jQuery (или javascript), вы можете добавить текстовое поле для каждого выбранного элемента, добавить текстовое поле в div. Что-то вроде: 

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)
0 голосов
/ 20 августа 2009

С HTML, как это: 

<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>

Вы можете использовать этот 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 />");
  }
});

На самом деле мне больше нравится JS от gw, но есть еще один способ сделать это.

...