Home/ Questions/Q 6840801
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T23:53:18+00:00

Hi everyone I’ve been looking for a simple example on how to make an

  • 0

Hi everyone I’ve been looking for a simple example on how to make an html select appear like a combobox. I found a sample code snippet from this link. Its actually an answer to a question similar to mine. Its answered by Samich. It has a jsfiddle link. I copied the code from jsfiddle and tweaked it a little bit to make it run on my machine but I can’t make it run.

Here is the code (Most of the codes are written by Samich):

<html>
    <head>
        <style type="text/css">
            #dropdown { position:absolute; width:200px; display:none; }
            #dropdown li:hover { background:#ccc; cursor:pointer; }
        </style>
        <script type="text/javascript" src="jquery1.6.4min.js"></script>
        <script type="text/javascript" > 
            $('#btn').click(function() {
                var pos = $('#txt').offset();
                pos.top += $('#txt').width();
                $('#dropdown').fadeIn(100);
                return false;
            });

            $('#dropdown li').click(function() {
                $('#txt').val($(this).text());
                $(this).parent().fadeOut(100);
            });
        </script>
    </head>

    <body>
        <input type="text" id="txt" /><a href="#" id="btn">V</a>
        <ul id="dropdown">
            <li>Value 1</li>
            <li>Value 2</li>
            <li>Value 3</li>
            <li>Value 4</li>
            <li>Value 5</li>
            <li>Value 6</li>
            <li>Value 7</li>
            <li>Value 8</li>
            <li>Value 9</li>
            <li>Value 10</li>
            <li>Value 11</li>
            <li>Value 12</li>
        </ul>
    </body>
</html>

I am very new to javascript and jquery so please bear with me guys. Thanks a lot in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    <script type="text/javascript">
$(document).ready(function() { 
  $('#btn').click(function() {
    var pos = $('#txt').offset();
    pos.top += $('#txt').width();

    $('#dropdown').fadeIn(100);

    return false;
  });

  $('#dropdown li').click(function() {
    $('#txt').val($(this).text());
    $(this).parent().fadeOut(100);
  });
});
</script>
    • 0