如何检查HTML选择选项中是否包含任何值

How to check if the HTML selection option contains any values in it

本文关键字：选项 是否 包含任 何值 选择 HTML 何检查 检查      更新时间：2023-09-26

为了在HTML选择选项不是空的情况下停止对服务器的多个请求

有人能告诉我如何检查HTML Select是否为空吗

这是我的HTML

<select name="" id="SCname">
     <option selected="true" style="display:none;">Select Screen</option>
</select>

var json = {
        "employees": [
            {
                "firstName": "John",
                "lastName": "Doe"
            },
            {
                "firstName": "Anna",
                "lastName": "Smith"
            },
            {
                "firstName": "Peter",
                "lastName": "Jones"
            }
        ]
};
var html = '';
for (var i = 0; i < json.employees.length; i++) {
    var firstName = json.employees[i].firstName;    
    var lastName = json.employees[i].lastName;
    html += '<option value="'+firstName+'">'+lastName+'</option>';
}
$('#SCname').append(html);
$('#SCname').show();

有人能告诉我如何检查这是不是空的吗？？

这是我的小提琴。

要确定SELECT中的选项数量，请使用javascript:

if (document.getElementById('SCname').options.length == 1 ){  // 1 because it looks like you automatically added 1 via HTML
}

或jQuery:

if ($('#SCname option').length == 1) {...}

目前还不完全清楚你是否询问如何确定当前选择的选项或选项的数量。。。

您可以在select元素选项上使用JQuery size()方法，该方法将返回元素数量(由于您持有默认元素，因此该数量应大于1(：

if ($('#SCname option').size() > 1)
{
  // Do some stuff
}

也许我误解了你的逻辑，但是，我想告诉你，既然你是在动态地附加选项元素，为什么不在做任何额外的处理之前检查employees对象的长度：

var html = '';
if (json.employees.length > 0) // Check your array size
{
  for (var i = 0; i < json.employees.length; i++) 
  { 
    var firstName = json.employees[i].firstName;
    var lastName = json.employees[i].lastName; html += ''+lastName+''; 
  } 
  $('#SCname').append(html); 
  $('#SCname').show();
}

由于您使用的是jQuery，请使用.val()方法：

if ($("#SCname").val() !== "") { 
  // ... The selection is not empty.
}

注意：这需要你是"空"选项有一个空值：value=""

示例

如果也想检查select菜单中是否存在option元素：

var mySelect = $("#SCname");
if (mySelect.val()!=="" && mySelect.find("option").length>0) { 
  // ... The selection is _not_ empty.
}
相关文章：