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

【问题标题】：Show the correct amount of input field based on qty input field entered根据输入的输入字段的数量显示正确的输入字段数量
【发布时间】：2017-05-05 03:28:50
【问题描述】：

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

例如，与会者 1 字段将始终显示，因为它是必填字段。然后，如果用户在数量输入字段中输入“2”，则只会显示与会者 1 和与会者 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/

提前致谢。

【问题讨论】：

  • 您有问题吗？你遇到什么问题？是否有某些原因您无法在 Stack Overflow 中将代码设置为代码 sn-p？所以，你只是想让我们为你编写所有的 JavaScript？
  • @ScottMarcus 是的，如果有人可以根据上述详细信息帮助我设置脚本，我将不胜感激，因为这超出了我的能力范围。或者给我一个起点，我可以尝试找出答案？谢谢
  • 这真的不是 Stack Overflow 的工作方式。我们不是代码编写服务。 “堆栈溢出”实际上是您在编程中可能遇到的一种错误。该网站旨在让人们发布他们遇到的特定编程问题，而不仅仅是要求编写代码来解决用例。

标签： javascript jquery html css


【解决方案1】：

这是一种使用 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>

【讨论】：

  • 很好 - 我只是在研究这种 exct 方法 - 你先到了 :)
  • @Michael Coker 这太完美了！非常感谢，但是即使我在数量字段中输入 6 - 15，它也只能让我接触到 5 位与会者？
  • @Jc0807 不客气。我只复制和粘贴了您输入的 5 个 :) 我将在几秒钟内添加更多内容，但您可以添加任意数量的内容。我必须编写新的 html 来添加它们（添加父元素）所以我停在 5 ;)
  • @Jc0807 ok 又添加了 5 个。
  • @Jc0807 添加了所有 15 个
【解决方案2】：

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>

【讨论】：

  • 非常感谢@nnnnnn，我们如何调整它以使其仅显示参加者 1 标签和默认字段，直到更改数量值？
  • 显示的代码就是这样做的（根据我几分钟前的编辑）。顺便说一句，在我的演示中，我将您的输入更改为 type="number" 以使其对用户更好，并且我注释掉了 onkeypress 所做的事情，因为您没有显示该功能。
猜你喜欢
  • 2019-02-21
  • 2020-12-16
  • 2023-01-17
  • 2016-03-16
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode