根据输入的数量输入字段显示正确的输入字段数量

时间：2017-05-05 03:28:50

标签： javascript jquery html css

我试图安排一个设置，根据输入的数量，显示参加者输入字段的数量。

示例将是参加者1字段将始终显示，因为它是填写的必填字段。然后，如果用户输入＆＃34; 2＆＃34;在数量输入字段中仅参加者1＆amp;参加者2将显示，等等......最多参与者是15岁。

我在这里设置了html标记。 

<div id="personal-fields">
<label class="personal-field-title">Attendee 1<span class="validate">*</span></label><input class="personal-field-value" name="attendee1" required="" /><p class="not-validated">* This field is required.</p>
<label class="personal-field-title">Attendee 2</label><input class="personal-field-value" name="attendee2" />
<label class="personal-field-title">Attendee 3</label><input class="personal-field-value" name="attendee3" />
<label class="personal-field-title">Attendee 4</label><input class="personal-field-value" name="attendee4" />
<label class="personal-field-title">Attendee 5</label><input class="personal-field-value" name="attendee5" />
<label class="personal-field-title">Attendee 6</label><input class="personal-field-value" name="attendee6" />
<label class="personal-field-title">Attendee 7</label><input class="personal-field-value" name="attendee7" />
<label class="personal-field-title">Attendee 8</label><input class="personal-field-value" name="attendee8" />
<label class="personal-field-title">Attendee 9</label><input class="personal-field-value" name="attendee9" />
<label class="personal-field-title">Attendee 10</label><input class="personal-field-value" name="attendee10" />
<label class="personal-field-title">Attendee 11</label><input class="personal-field-value" name="attendee11" />
<label class="personal-field-title">Attendee 12</label><input class="personal-field-value" name="attendee12" />
<label class="personal-field-title">Attendee 13</label><input class="personal-field-value" name="attendee13" />
<label class="personal-field-title">Attendee 14</label><input class="personal-field-value" name="attendee14" />
<label class="personal-field-title">Attendee 15</label><input class="personal-field-value" name="attendee15" />
</div>

<div class="attributeselection">
<span class="leftselection thumbnail">Qty<input name="ctl00$MainCentre$container$container$Content_31$StyleDetail1$txtQuantity" id="ctl00_MainCentre_container_container_Content_31_StyleDetail1_txtQuantity" value="1" maxlength="5" class="inputqty form-control" autocomplete="off" onkeypress="return NumericText(event);" pattern="[0-9]*" type="text"> 
</span> 
</div>

https://jsfiddle.net/kjy4hdhz/

提前致谢。

2 个答案:

答案 0 :(得分：2)

这是一种使用JS的方法。我将标签/输入包装在一个元素中，以便更容易定位，并添加了一个切换display属性以隐藏/显示它们的类。

var field = document.getElementById('ctl00_MainCentre_container_container_Content_31_StyleDetail1_txtQuantity'),
		groups = document.getElementById('personal-fields').getElementsByClassName('group');
    
field.addEventListener('change',function() {
	var val = this.value;
  for (var i = 0; i < groups.length; i++) {
  	if (i < val) {
      groups[i].classList.remove('hidden');
    } else {
    	groups[i].classList.add('hidden');
    }
  }
})
#personal-fields {
		display: inline-block;
		background-color: #f3f3f3;
		border: 1px solid #dfdfdf;
		padding: 20px;
		width: auto;
		margin-top: 20px;
	}
	#personal-fields label{
		font-size: 12px;
		font-family: sans-serif;
		width: 150px;
		display: inline-block;
		font-weight: bold;
	}
	.personal-field-value{
		padding: 8px;
		margin-bottom: 10px;
		width: 220px;
		border: 1px solid #dfdfdf;
		display: block;
	}
	.personal-field-value:hover{
		border: 1px solid #000;
	}
	span.validate{
		color: #d10000;
		vertical-align: top;
	}
	p.not-validated{
		text-align: right;
		font-size: 10px;
		color: #d10000 !important;
		font-family: sans-serif;
		margin: 0 0 10px;
		display: none;
	}
  
  .attributeselection{
    display: inline-block;
    width: 100%;
    margin: 20px 0;
  }
  .attributeselection input{
    padding: 5px;
    border: 1px solid #ccc;
  }
  
  .hidden {
    display: none;
  }
  <div id="personal-fields">
    <div class="group">
    <label class="personal-field-title">Attendee 1<span class="validate">*</span></label><input class="personal-field-value" name="attendee1" required="" /><p class="not-validated">* This field is required.</p>
    </div>
    <div class="group hidden">
           <label class="personal-field-title">Attendee 2</label><input class="personal-field-value" name="attendee2" />

    </div>
    <div class="group hidden">
    	   <label class="personal-field-title">Attendee 3</label><input class="personal-field-value" name="attendee3" />

    </div>
    <div class="group hidden">
    	   <label class="personal-field-title">Attendee 4</label><input class="personal-field-value" name="attendee4" />

    </div>
    <div class="group hidden">
    	   <label class="personal-field-title">Attendee 5</label><input class="personal-field-value" name="attendee5" />

    </div>
<div class="group hidden">
    	   <label class="personal-field-title">Attendee 6</label><input class="personal-field-value" name="attendee5" />

    </div>
<div class="group hidden">
    	   <label class="personal-field-title">Attendee 7</label><input class="personal-field-value" name="attendee5" />

    </div>
<div class="group hidden">
    	   <label class="personal-field-title">Attendee 8</label><input class="personal-field-value" name="attendee5" />

    </div>
<div class="group hidden">
    	   <label class="personal-field-title">Attendee 9</label><input class="personal-field-value" name="attendee5" />

    </div>
<div class="group hidden">
    	   <label class="personal-field-title">Attendee 10</label><input class="personal-field-value" name="attendee5" />

    </div>
<div class="group hidden">
    	   <label class="personal-field-title">Attendee 11</label><input class="personal-field-value" name="attendee5" />

    </div>
<div class="group hidden">
    	   <label class="personal-field-title">Attendee 12</label><input class="personal-field-value" name="attendee5" />

    </div>
<div class="group hidden">
    	   <label class="personal-field-title">Attendee 13</label><input class="personal-field-value" name="attendee5" />

    </div>
<div class="group hidden">
    	   <label class="personal-field-title">Attendee 14</label><input class="personal-field-value" name="attendee5" />

    </div>
<div class="group hidden">
    	   <label class="personal-field-title">Attendee 15</label><input class="personal-field-value" name="attendee5" />

    </div>
       
</div>

<div class="attributeselection">
<span class="leftselection thumbnail"><input name="ctl00$MainCentre$container$container$Content_31$StyleDetail1$txtQuantity" id="ctl00_MainCentre_container_container_Content_31_StyleDetail1_txtQuantity" value="1" maxlength="5" class="inputqty form-control" autocomplete="off" pattern="[0-9]*" type="text"></span> 
         <span class="rightselection thumbnail"><span id="ctl00_MainCentre_container_container_Content_31_StyleDetail1_lblSelection"></span></span> 
      </div>

答案 1 :(得分：1)

jQuery的.slice() method使这很容易：

$(".inputqty").change(function() {        // when the Quantity input is changed
  var qty = +this.value                   // (try to) convert its value to a number
  if (qty >= 1 && qty <= 15) {                             // if valid, then...
    $(".personal-field-title").hide().slice(0,qty).show()  // show that many labels
    $(".personal-field-value").hide().slice(0,qty).show()  // and inputs
  } else {                                                 // otherwise
    alert("Please enter a quantity between 1 and 15.")     // show message
  }
}).change()    // trigger the handler once to show default number of items
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="personal-fields">
<label class="personal-field-title">Attendee 1<span class="validate">*</span></label><input class="personal-field-value" name="attendee1" required="" /><p class="not-validated">* This field is required.</p>
<label class="personal-field-title">Attendee 2</label><input class="personal-field-value" name="attendee2" />
<label class="personal-field-title">Attendee 3</label><input class="personal-field-value" name="attendee3" />
<label class="personal-field-title">Attendee 4</label><input class="personal-field-value" name="attendee4" />
<label class="personal-field-title">Attendee 5</label><input class="personal-field-value" name="attendee5" />
<label class="personal-field-title">Attendee 6</label><input class="personal-field-value" name="attendee6" />
<label class="personal-field-title">Attendee 7</label><input class="personal-field-value" name="attendee7" />
<label class="personal-field-title">Attendee 8</label><input class="personal-field-value" name="attendee8" />
<label class="personal-field-title">Attendee 9</label><input class="personal-field-value" name="attendee9" />
<label class="personal-field-title">Attendee 10</label><input class="personal-field-value" name="attendee10" />
<label class="personal-field-title">Attendee 11</label><input class="personal-field-value" name="attendee11" />
<label class="personal-field-title">Attendee 12</label><input class="personal-field-value" name="attendee12" />
<label class="personal-field-title">Attendee 13</label><input class="personal-field-value" name="attendee13" />
<label class="personal-field-title">Attendee 14</label><input class="personal-field-value" name="attendee14" />
<label class="personal-field-title">Attendee 15</label><input class="personal-field-value" name="attendee15" />
</div>

<div class="attributeselection">
<span class="leftselection thumbnail">Qty<input name="ctl00$MainCentre$container$container$Content_31$StyleDetail1$txtQuantity" id="ctl00_MainCentre_container_container_Content_31_StyleDetail1_txtQuantity" value="1" maxlength="5" class="inputqty form-control" autocomplete="off" onkeypress="/*return NumericText(event);*/" pattern="[0-9]*" type="number"> 
</span> 
</div>

相关问题
最新问题