选择多个选项创建多个输入

问题描述：

我在表单中有一个选择字段，允许您选择多个选项。选择多个选项创建多个输入

我需要为选中的每个选项自动创建一个新的输入文本框。

例如，如果您在选择框中选择选项，则会在其下方显示一个输入。如果您选择5，则下方会显示5个输入。

我不确定这是否可以在直接的Javascript中完成，或者如果我需要使用jQuery或其他形式的AJAX来完成此操作，但我不确定如何处理此操作（我对使用AJAX比较陌生）

是否有固定数量的选项可供添加？ – PortageMonkey 2009-08-20 15:56:54

它是一个动态选择框，它基于前一个选择框heh填充。 – 2009-08-20 19:37:03

答

那么，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>

我似乎无法得到这个工作...有没有我忘记的东西？我已经包含jQuery库.. – 2009-08-20 19:40:08

将示例更改为完整的HTML页面 – 2009-08-20 19:44:14

好吧，很好，不知道以前有什么错，但我得到它的工作。我不知道jQuery，所以你可以帮我做最后的调整。我需要能够限制哪些选项创建新的框。因此，如果选择了值为-1或0的选项，则不会创建新的文本框。还有别的。感谢您的帮助！ – 2009-08-24 16:31:52

答

只是一些快速的想法.. 在选择元素下添加一个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)

嗯我很难得到这个工作，有没有什么我忘了添加在这里？ – 2009-08-20 19:38:55

答

在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 />"); 
    } 
});

其实我喜欢GW的JS更好，但这里的另一种方式来做到这一点。

选择多个选项创建多个输入

相关推荐