我试图在选择下拉列表中输出选项数,但同一页上有多个选项.
例如：
<select name="select" class="drop"> <option name="option" value="Option 1"></option> </select> <select name="select" class="drop"> <option name="option" value="Option 1"></option> <option name="option" value="Option 2"></option> <option name="option" value="Option 3"></option> </select>
所以第一个输出(1),第二个输出(3).
我有这个代码,但它输出(4) – 从所有选择计数所有选项.
<script type="text/javascript">
$(function() {
$(".date_number").text($(".drop option").length + " items");
});
</script>
任何帮助谢谢！
解决方法
使用选择器“.drop选项”将获得类“.drop”下的元素(不一定是直接子元素)下的所有选项元素.
请注意,这不仅适用于select元素,而且还适用于：
<div class="drop">
<select>
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</select>
</div>
$('.drop option').length // 3
为确保您的< option> < select class =“drop”>的元素子元素,使用子选择器> ;:
$('.drop > option');
要单独选择每个选择的选项数量,您可以选择< select>然后再为每一个计数.你可以这样做：
var optionsArr = $('select.drop').map(function() {
return $(this).find('option:not(:disabled)').length;
}).toArray();
这将返回一个不同数量的数组：[1,3]
DEMO
要添加文本“3可用日期”的div,请执行以下操作：
$('select.drop').each(function() {
// the current select.drop
var $this = $(this);
// create a div with the text you want
$('<div>' + $this.find('option:not(:disabled)').length + ' date(s) available</div>')
// append it after the current select.drop
.insertAfter($this);
});
///////////////////////
好的,几乎有！再次感谢您的时间在这…
我已经把代码放在了,它正在做我想做的事情,但是由于这一切都在手风琴中,因此每个手风琴项目都会循环播放.看屏幕截图(借口造型)：
我只需要它现在只循环在手风琴的选择下降,而不是每一个.
此外,在我的选择中,我将第一个选项设置为“已禁用”作为验证的一部分,以便用户必须在继续之前选择一个项目,例如：
<option disabled="disabled"></option>
javascript也在计数.那么有什么办法可以把一个-1放在这个结果中,还是有更好的方法来做到这一点我失踪了？
再次感谢…