選擇多個選項創建多個輸入

我在表單中有一個選擇字段，允許您選擇多個選項。選擇多個選項創建多個輸入

我需要爲選中的每個選項自動創建一個新的輸入文本框。

例如，如果您在選擇框中選擇選項，則會在其下方顯示一個輸入。如果您選擇5，則下方會顯示5個輸入。

我不確定這是否可以在直接的Javascript中完成，或者如果我需要使用jQuery或其他形式的AJAX來完成此操作，但我不確定如何處理此操作（我對使用AJAX比較陌生）

來源

2009-08-20 Dave Hunt

是否有固定數量的選項可供添加？ – 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>

來源

2009-08-20 16:27:18

我似乎無法得到這個工作...有沒有我忘記的東西？我已經包含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 16:03:12 WorthiGe

嗯我很難得到這個工作，有沒有什麼我忘了添加在這裏？ – 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更好，但這裏的另一種方式來做到這一點。

來源

2009-08-20 16:13:55

選擇多個選項創建多個輸入

回答

相關問題