将选项显示为一个框而不是下拉列表（仅一个选项）

Question

I have a select tag to display a set of connections with size set to 3 :

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

The connections get added and deleted dynamically, and when they get deleted, if number of connections become less than 3, I decrement the size attribute. But when only one connection remains, the size becomes 1, it is showing it in a dropdown shape. Like this :

I don't want the dropdown. Any way to resolve this ?

Answer 1

Try this:

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

}
});

Okay so basically what I have done is , I have a textbox next to select box in hidden state. Now i don't know how you are populating the select box, so on load jquery will check for number of options your select has. If it has 1 it will give the option value to the text box, hide your select box and show the text box.

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