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

In my case, I want to get the select element's visible options' count (By visible options' count, I mean how many options are visible without scrolling. Thanks Matthew). If size attribute is set, then element.size is the value I need. When it isn't, things get a little tricky.

在我的情况下,我想得到select元素的可见选项'count(通过可见选项'计数,我的意思是有多少选项在没有滚动的情况下可见。感谢Matthew)。如果设置了size属性,则element.size是我需要的值。如果不是,事情变得有点棘手。

For example, in following code:

例如,在以下代码中:

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

In IE/Chrome/Firefox, it will show like the picture below. In this case, count should be 3:

在IE / Chrome / Firefox中,它将显示如下图所示。在这种情况下,计数应为3:

If option count in previous case is greater than 4, it still shows 4 visible lines. In this case, count should be 4:

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

Is there a good way, other than using if...else..., to get the visible options' count of select tag, in any circumstances?

除了使用if ... else ...之外,还有一种好方法可以在任何情况下获得可见选项的选择标记数吗?

FYI, I'm developing a test software to do functional testing for customers' website, so I'm not able to modify code of the web page.

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

4 个解决方案

#1

I hope I understood correctly:

我希望我理解正确:

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

live demo: https://jsfiddle.net/md13qq0d/

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

edit: sorry, I have not seen that you are not using jQuery: https://jsfiddle.net/md13qq0d/2/

编辑:对不起,我还没有看到你没有使用jQuery:https://jsfiddle.net/md13qq0d/2/

#2

please check you will get count ....

请检查你会得到数...

  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);
    }

#3

You can give id to your select tag and using that id u can easily retrieve no. of visible items(options) in that particular select tag .My eg -

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

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

Here 'selectid' is the id given to the particular select whose visible options u want to get .

这里'selectid'是给你想要获得的特定选择的id。

#4

I find out a new solution to this question, and it seems better. Here is code:

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

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);

There are some basic facts on select element which make me write code like this:

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

If size property is set to valid values (larger than 0), the visible items' count is depending on the relationship between element.size and element.length, regardless of multiple set or not.

如果将size属性设置为有效值(大于0),则可见项的计数取决于element.size和element.length之间的关系,无论是否有多个set。

If size not set, but multiple set, the count will be depending on the relationship between element.length and 4, which is the default value of size in multiple mode. For more information, please see specification of select element.

如果未设置大小,但设置了多个,则计数将取决于element.length和4之间的关系,这是多模式下大小的默认值。有关更多信息,请参阅select元素的规范。

If both size and multiple not set, the count will be either 1 or 0, which is depending on whether the select has options or not.

如果未设置大小和倍数,则计数将为1或0,这取决于select是否具有选项。

#1