Dropdown max size

Dinesh Bali
Dinesh Bali used Ask the Experts™
on
Hi,

I need to make dropdown to open with max 10 in size when user selects the dropdown. If I use size attribute as 10 then dropdown remains open. Please advise.
Sample dropdown code below:

 <select id="selectcurrency" class="form-control formdoropdwon currencydropdownselect" onchange="updateCurrency(this);">
        <option value="0">Select currency</option>
        <option value="AED" currcode="AED" currname="United Arab Emirates Dirham(AED)">AED-United Arab Emirates Dirham(AED)</option>
        <option value="AUD" currcode="AUD" currname="Australian Dollar(AUD)">AUD-Australian Dollar(AUD)</option>
        <option value="USD" currcode="USD" currname="Us Dollar(USD)">USD-Us Dollar(USD)</option>
        <option value="AFN" currcode="AFN" currname="Afghani(AFN)">AFN-Afghani(AFN)</option>
        <option value="DZD" currcode="DZD" currname="Algerian Dinar(DZD)">DZD-Algerian Dinar(DZD)</option>
        <option value="ARS" currcode="ARS" currname="Argentine Peso(ARS)">ARS-Argentine Peso(ARS)</option>
        <option value="AZM" currcode="AZM" currname="Azerbaijan Manat(AZM)">AZM-Azerbaijan Manat(AZM)</option>
        <option value="BHD" currcode="BHD" currname="Bahraini Dinar(BHD)">BHD-Bahraini Dinar(BHD)</option>
        <option value="BDT" currcode="BDT" currname="Bangladesh Taka(BDT)">BDT-Bangladesh Taka(BDT)</option>
        <option value="BBD" currcode="BBD" currname="Barbados Dollar(BBD)">BBD-Barbados Dollar(BBD)</option>
        <option value="BMD" currcode="BMD" currname="Bermudian Dollar (Bermuda Dollar)(BMD)">BMD-Bermudian Dollar (Bermuda Dollar)(BMD)</option>
        <option value="BWP" currcode="BWP" currname="Botswana Pula(BWP)">BWP-Botswana Pula(BWP)</option>
        <option value="BRL" currcode="BRL" currname="Brazilian Real(BRL)">BRL-Brazilian Real(BRL)</option>
        <option value="BND" currcode="BND" currname="Brunei Dollar(BND)">BND-Brunei Dollar(BND)</option>
        <option value="BGN" currcode="BGN" currname="Bulgarian Lev(BGN)">BGN-Bulgarian Lev(BGN)</option>
        <option value="CAD" currcode="CAD" currname="Canadian Dollar(CAD)">CAD-Canadian Dollar(CAD)</option>
        <option value="GHC" currcode="GHC" currname="Cedi(GHC)">GHC-Cedi(GHC)</option>
        <option value="XOF" currcode="XOF" currname="Cfa Franc Bceao(XOF)">XOF-Cfa Franc Bceao(XOF)</option>
        

    </select>

Open in new window


Regards,
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Paul JacksonSoftware Engineer
Top Expert 2011

Commented:
There is no property to restrict the number of items shown in a dropdown, it is determined by the browser/operating system and will generally vary from user to user depending on the resolution they are using and other factors.

Author

Commented:
Are you sure? Can I have some article on this please?

I just need dropdown size to be upto 10 and then scrollbar should come.
So that user can select the items.
David S.Consultant & Challenge Subduer
Top Expert 2009

Commented:
We're sure. There are just styling limitations to a lot of form controls. As an alternative for a plain <select>, you could use Awesomplete.
CompTIA Security+

Learn the essential functions of CompTIA Security+, which establishes the core knowledge required of any cybersecurity role and leads professionals into intermediate-level cybersecurity jobs.

Author

Commented:
Many Thanks

This is autocomplete textbox.
I need user should be able to select from dropdown as well.
I don't mind if the dropdown is editable and user can also write text.
But dropdown is must,

Please advise.
Hi,

You can use Select2 for this https://select2.org/dropdown
This is flexible and full of features

You can set the CSS value instead of  item limit
https://select2.org/appearance
Multitechnician
Top Expert 2014
Commented:
test page : http://jsfiddle.net/4whj295t/

jQuery(function($) {
	$("#fakeselectcurrency").hover(function() {
		$("#selectcurrency").show();  
  },
  function() {
		$("#selectcurrency").hide();    
  });
  $("#selectcurrency").change(function() {
  	$(":text[name='selectcurrency']").val(currency.value);
  });
});

Open in new window


#selectcurrency {
  display:none;
}
#textcurrency {
  width:295px;
}

Open in new window


<div id="fakeselectcurrency">
  <input type="text" value="Select currency" name="selectcurrency" id="textcurrency" />
  <br/>
  <select id="selectcurrency" class="form-control formdoropdwon currencydropdownselect" multiple="multiple" size="10">
        <option value="AED" currcode="AED" currname="United Arab Emirates Dirham(AED)">AED-United Arab Emirates Dirham(AED)</option>
        <option value="AUD" currcode="AUD" currname="Australian Dollar(AUD)">AUD-Australian Dollar(AUD)</option>
        <option value="USD" currcode="USD" currname="Us Dollar(USD)">USD-Us Dollar(USD)</option>
        <option value="AFN" currcode="AFN" currname="Afghani(AFN)">AFN-Afghani(AFN)</option>
        <option value="DZD" currcode="DZD" currname="Algerian Dinar(DZD)">DZD-Algerian Dinar(DZD)</option>
        <option value="ARS" currcode="ARS" currname="Argentine Peso(ARS)">ARS-Argentine Peso(ARS)</option>
        <option value="AZM" currcode="AZM" currname="Azerbaijan Manat(AZM)">AZM-Azerbaijan Manat(AZM)</option>
        <option value="BHD" currcode="BHD" currname="Bahraini Dinar(BHD)">BHD-Bahraini Dinar(BHD)</option>
        <option value="BDT" currcode="BDT" currname="Bangladesh Taka(BDT)">BDT-Bangladesh Taka(BDT)</option>
        <option value="BBD" currcode="BBD" currname="Barbados Dollar(BBD)">BBD-Barbados Dollar(BBD)</option>
        <option value="BMD" currcode="BMD" currname="Bermudian Dollar (Bermuda Dollar)(BMD)">BMD-Bermudian Dollar (Bermuda Dollar)(BMD)</option>
        <option value="BWP" currcode="BWP" currname="Botswana Pula(BWP)">BWP-Botswana Pula(BWP)</option>
        <option value="BRL" currcode="BRL" currname="Brazilian Real(BRL)">BRL-Brazilian Real(BRL)</option>
        <option value="BND" currcode="BND" currname="Brunei Dollar(BND)">BND-Brunei Dollar(BND)</option>
        <option value="BGN" currcode="BGN" currname="Bulgarian Lev(BGN)">BGN-Bulgarian Lev(BGN)</option>
        <option value="CAD" currcode="CAD" currname="Canadian Dollar(CAD)">CAD-Canadian Dollar(CAD)</option>
        <option value="GHC" currcode="GHC" currname="Cedi(GHC)">GHC-Cedi(GHC)</option>
        <option value="XOF" currcode="XOF" currname="Cfa Franc Bceao(XOF)">XOF-Cfa Franc Bceao(XOF)</option>
    </sele

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial