如何获取可见选项的HTML选择标记数，具有多个属性集，而未设置大小？

Question

在我的情况下，我希望选择元素的可见选项计数（通过可见选项计数，我的意思是可以看到多少选项而不滚动。谢谢马修）。如果设置了 size 属性，则 element.size 是我需要的值。如果不是，事情会变得有点棘手。

例如，在以下代码中：

<select multiple="multiple">
    <option>text1</option>
    <option>text2</option>
    <option>text3</option>
</select>

在IE / Chrome / Firefox中，它将如下图所示。在这种情况下， count 应为3：

如果前一种情况下的选项计数大于4，则仍显示4条可见线。在这种情况下， count 应为4：

除了使用 if ... else ... 之外，在任何情况下都有一个好方法来获取可见选项的选择标记的数量吗？

仅供参考，我正在开发一个测试软件来为客户的网站进行功能测试，因此我无法修改网页代码。

Answer 1

我希望我理解正确：

 var maxVisibleCount = Math.floor(containerHeight / optionHeight);
 var actualCount = $(this).children('option').length;
 var result = (maxVisibleCount > actualCount) ? actualCount : maxVisibleCount;

现场演示： https://jsfiddle.net/md13qq0d/

编辑：抱歉，我还没有看到你没有使用jQuery： https://jsfiddle.net/md13qq0d/2/

Answer 2

您可以为您的选择标记提供ID，并使用该ID，您可以轻松检索否。特定选择标签中的可见项目（选项）。例如 -

  

<script type="text/javascript">  
alert($('#selectid option').length);  
</script>  

此处' selectid '是指定给您想要获取的可见选项的特定选择的ID。

Answer 3

请检查你的数量......

  function GetSelected () {
        var select = document.getElementById ("mySelect");
        var txt = "";
        for (var i = 0; i < select.options.length; i++) {
            var isSelected = select.options[i].selected;
            isSelected = (isSelected)? "selected" : "not selected";
            txt += "The " + i + " option is " + isSelected + "\n";
        }
        alert (txt);
    }

Answer 4

我找到了这个问题的新解决方案，看起来似乎更好。这是代码：

var e = document.getElementById("id_to_select");
var threshold;

if (e.size > 0) {
    threshold = e.size;
} else { // size not set
    threshold = e.multiple ? 4 : 1; // Why 4, please see below
}
return Math.min(e.length, threshold);

select 元素有一些基本的事实让我编写这样的代码：

• 如果 size 属性设置为有效值（大于0），则可见项目＆＃39; count取决于element.size和element.length之间的关系，无论多个是否设置。
• 如果 size 未设置，但多个设置，则计数将取决于element.length和4之间的关系，这是多个大小的默认值模式。有关详细信息，请参阅specification of select element。
• 如果未设置 size 和 multiple ，则计数将为1或0，具体取决于select是否具有选项。