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

Question

如果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();

有人可以告诉我如何检查它是否为空吗？

这是我的jsfiddle 。

Answer 1

要确定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) {...}

您是否询问如何确定当前选择的选项或选项数量还不清楚...

Answer 2

由于您使用的是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.
}

Answer 3

您可以在select element选项上使用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();
}