在使用數據列表輸入生成表單時需要幫助

Question

抱歉，以前是否有人問過這個問題，但是我已經運氣好幾個小時了。

我要完成的工作：我希望有一個表格，該表格首先詢問用戶他們需要注冊多少個孩子（最少1個，最多10個）。 然后，我需要能夠使用此變量來使最多10個子項可見。 我打算做的是使用數據列表中的值，然后使用if / else語句生成表單。 （如果id = 2，那么（窗體看起來像這樣……）否則）……我不知道該怎么做，就是捕獲選擇，然后將其傳遞給if / then語句。

<h2>How many children are you registering?</h2>
    <input type="range" value="1" "min=1" max="10" list="number" />
<datalist id="number">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
  </datalist>

Answer 1

HTML：

<h2>How many children are you registering?</h2>
    <input type="range" value="1" "min=1" max="10" list="number" onChange="change(this);" />
<datalist id="number">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
  </datalist>
<div id="childrens">
</div>

JAVASCRIPT（在<head>中）：

function change(el) {
    var container = document.getElementById('childrens'),
        child;
    // Clear container
    container.innerHTML = '';
    // Add number of child inputs
    for (var i=0; i<el.value; i++) {
        child = document.createElement("input");
        child.type = 'text';
        container.appendChild( child );
    }
}

單擊此處獲取JSFIDLE演示

Answer 2

使用jQuery

試試這個。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>

<body>
<h2>How many children are you registering?</h2>


<input type="range" value="1" "min=1" max="10" list="number" id="list" />
<datalist id="number">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3" >3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</datalist>
<div id="form_input">

</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$('#list').change(function(){
    var i = $(this).val();
    var m = 0;
    $('#form_input').html("");
    if(i != 0){
        $('#form_input').append('<form id="form">');    
        while(m<i){
            $('#form_input').append('<input type="text" id="text_'+m+'" name="text_'+m+'" />');           m++;
        }
        $('#form_input').append('</form>'); 
    }
});
</script>
</body>
</html>

在使用數據列表輸入生成表單時需要幫助

問題描述

2 個解決方案

解決方案1
0 2014-02-15 16:22:45

解決方案2
0 已采納 2014-02-15 16:31:31

在使用數據列表輸入生成表單時需要幫助

問題描述

2 個解決方案

解決方案1 0 2014-02-15 16:22:45

解決方案2 0 已采納 2014-02-15 16:31:31

解決方案1
0 2014-02-15 16:22:45

解決方案2
0 已采納 2014-02-15 16:31:31