查看选项作为框而不是下拉列表（只有一个选项）

Question

我有一个select标签来显示一组大小设置为3的连接：

<select float="left" id="selectedConnection" name="selectedConnection" size="3" style="overflow:auto;">

连接被动态添加和删除，当它们被删除时，如果连接数小于3，我会减小size属性。但是当只剩下一个连接时，大小变为1，它以下拉形状显示。像这样：

我不想要下拉列表。有什么办法解决这个问题？

Answer 1

试试这个：

HTML：

<select float="left" id="selectedConnection" name="selectedConnection" size="3" style="overflow:auto;">
<input type="text" id="selectedConnectionText" name="selectedConnection" style="display:none">

JQUERY：

$( document ).ready(function() {
if($('select#selectedConnection option').length == 1)
{

  $("#selectedConnection").hide();
  $('#selectedConnectionText').val($("#selectedConnection option:first").val());
  $('#selectedConnectionText').show();

}
});

好的，基本上我所做的是，我在隐藏状态下选择框旁边有一个文本框。现在我不知道你如何填充选择框，所以加载jquery将检查你的选择的选项数量。如果它有1，它将为文本框提供选项值，隐藏您的选择框并显示文本框。

JSFiddle：https://jsfiddle.net/oepbdtw2/