Stylish Combobox with jQuery and CSS

Question

Stylish Combobox with jQuery and CSS

Seeking assistance in creating a stylish combo box using CSS and jQuery. The combo box will contain 3 items, and I need guidance on how to select items within the combo box and display the selected item. Any help or suggestions would be greatly appreciated! Below is the snippet of my code:

http://jsfiddle.net/vmCBJ/

 $(function () {
        $('#clickIcon').click(function() {

        });
        $("ul.dropdown li").click(function () {
            $(this).addClass("hover");
            $('ul:first', this).css('visibility', 'visible');

        }, function () {

            $(this).removeClass("hover");
            $('ul:first', this).css('visibility', 'hidden');

        });

        $("ul.dropdown li ul li:has(ul)").find("a:first").append(" &amp;amp;amp;raquo; ");

    });


<div id="page-wrap">
    <span>
        <ul class="dropdown">
            <li><a href="#">Cannot</a>
                <ul class="sub_menu">
                    <li>
                        <a href="#">Can</a>
                    </li>
                    <li>
                        <a href="#">Must</a>
                    </li>

                </ul>
            </li>

        </ul>
    </span>
    <span id="clickIcon" style="background-color: gray;padding-left: 5px;font-weight: 900;">
        V
    </span>
</div>

jquery css combobox

Answer 1

Answer №1

Here is the solution I came up with: http://jsfiddle.net/K2ndZ/

I have redesigned it to make the functionality more evident. It is worth noting that this solution may not work if the user's browser does not support javascript. Perhaps using a drop-down menu would be a more reliable option?

Here is the HTML code:

<div class="combobox">
    <div class="selector">Please select</div>
    <ul>
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
    </ul>
</div>

And the corresponding CSS:

.combobox {cursor:pointer;display:inline-block;}
.combobox .selector{border:1px solid #cccccc;padding: 2px 5px}
.combobox ul {padding:0;margin:0;display:inline-block;border:1px solid #eeeeee;background-color:#cccccc;}
.combobox li {padding: 2px 5px}

Lastly, the jQuery script:

$(document).ready(function(){
    $('.combobox ul').hide();
    $('.combobox').hover(
        function(){
            $(this).find('ul').stop().slideDown();
        },
        function(){
            $(this).find('ul').stop().slideUp();
        }
    );
    $('.combobox li').click(function(){
        $(this).parents('.combobox').find('.selector').text($(this).text());
    });
});

Answer 2

Here is the solution I came up with: http://jsfiddle.net/K2ndZ/

I have redesigned it to make the functionality more evident. It is worth noting that this solution may not work if the user's browser does not support javascript. Perhaps using a drop-down menu would be a more reliable option?

Here is the HTML code:

<div class="combobox">
    <div class="selector">Please select</div>
    <ul>
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
    </ul>
</div>

And the corresponding CSS:

.combobox {cursor:pointer;display:inline-block;}
.combobox .selector{border:1px solid #cccccc;padding: 2px 5px}
.combobox ul {padding:0;margin:0;display:inline-block;border:1px solid #eeeeee;background-color:#cccccc;}
.combobox li {padding: 2px 5px}

Lastly, the jQuery script:

$(document).ready(function(){
    $('.combobox ul').hide();
    $('.combobox').hover(
        function(){
            $(this).find('ul').stop().slideDown();
        },
        function(){
            $(this).find('ul').stop().slideUp();
        }
    );
    $('.combobox li').click(function(){
        $(this).parents('.combobox').find('.selector').text($(this).text());
    });
});

Answer 3

Answer №2

It's important to note that StackOverflow isn't here to write code for you. It's essential that you conduct your own research. Simply indicating which item in the list is "active" won't be sufficient to create a fully functional combobox. In fact, what you've created is more of a custom dropdown than a combobox.

I've made some modifications to your code (which should not be used in a live environment) to guide you in the right direction. You can view the updated code here.

Here's what I changed:

    $(".sub_menu a").click(function () {
        var currentItem = $(this).text();
        $active = $('.dropdown a').first();
        $(this).text($active.text());
        $active.text(currentItem);

        return false;
    });

This code captures the click event in the submenu. It saves the text from the item that was clicked in a variable, locates the "active" element (the one outside of the submenu), and swaps the text between the clicked item and the "active" one.

However, it's worth mentioning that this setup still falls short of a proper combobox implementation :)

Answer 4

It's important to note that StackOverflow isn't here to write code for you. It's essential that you conduct your own research. Simply indicating which item in the list is "active" won't be sufficient to create a fully functional combobox. In fact, what you've created is more of a custom dropdown than a combobox.

I've made some modifications to your code (which should not be used in a live environment) to guide you in the right direction. You can view the updated code here.

Here's what I changed:

    $(".sub_menu a").click(function () {
        var currentItem = $(this).text();
        $active = $('.dropdown a').first();
        $(this).text($active.text());
        $active.text(currentItem);

        return false;
    });

This code captures the click event in the submenu. It saves the text from the item that was clicked in a variable, locates the "active" element (the one outside of the submenu), and swaps the text between the clicked item and the "active" one.

However, it's worth mentioning that this setup still falls short of a proper combobox implementation :)

Stylish Combobox with jQuery and CSS

Answer №1

Answer №2

Similar questions

The presence of  on the website is causing problems with the dropdown

Displaying the "Ad Blocker Detected" image next to the advertisement

Steps to incorporate Ajax into current pagination system built with PHP and Mysql

Leveraging the "dialogclose" event within jQuery Mobile

Conceal and reveal elements using a specific identifier with

Alignment of label not remaining centered vertically, issue with bootstrap

Troubleshooting issues with Bootstrap's responsiveness configuration

showing the chosen item in a Bootstrap dropdown [limited to the first menu option and using the attr() method]

Using jQuery .sortable() to reorder list items and update their IDs based on their new positions

An automated feature that smoothly transitions a large image onto the screen

Fade between two divs using jQuery works perfectly with images, but unfortunately, it does not work with iframes

Steps to establish the starting value as 'Concealed'

Ways to increase the values in a textbox

Tips for maintaining interactivity after a page refresh

Obtain the value for every span class and insert the corresponding string into the input field

Display the delete message URL according to the user's name

Clicking the checkbox in IE9 to activate its function

Substitute all text within the HTML element

What is the best way to ensure a jQuery UI slider recognizes when the mouse is released after being clicked?

Is there a way to position my input at the bottom of its parent element?