jQuery UI Widgets Forums Lists ListBox Make Listbox appear on click

This topic contains 4 replies, has 5 voices, and was last updated by  Peter Stoev 11 years, 3 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Make Listbox appear on click #18322


    Is it possible to have a listbox only appear after a button is clicked somewhere on the page.

    I have the listbox set up but don’t want it to be available until a user clicks a button. Only then does it appear.

    I actually want three things to appear but if i could understand the code to make one appear i will hopefully be able to apply it

    Make Listbox appear on click #18331


    Hello w424637,

    Here is the solution:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <title>jQuery ListBox Sample</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../../scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <div id='content'>
    <script type="text/javascript">
    $(document).ready(function () {
    var source = [
    "Café Bombón",
    "Café au lait",
    "Caffé Corretto",
    "Café Crema",
    "Caffé Latte",
    // Create a jqxListBox
    $("#jqxlistbox").jqxListBox({ source: source, width: '200px', height: '200px' });
    $("#button").click(function () {
    $("#jqxlistbox").css("display", "block");
    <div id='jqxlistbox' style="display: none;">
    <div style="margin-top: 10px;">
    <input id="button" type="button" value="Show listbox" />
    <div id="eventlog">

    Best Regards,

    jQWidgets team

    Make Listbox appear on click #19115


    Hi Dimitar,

    In the above example. I have made some modifications. I got bizarre results. Could you please fix that issue for me.

    1) I have added: Checkboxes: true. It means listbox will be a multi-select.

    2) On button click list box appears. I would like to close list box on clicking anywhere.
    so I added

    Now when ever I click checkboxes, they get selected(multiple) and on clicking anywhere it is closing.

    Issue : Instead of clicking checkboxes, we can also click the text such that it will be selected. But here on clicking the text, it is getting selected but it is closing. To select other option I need to click the button again. I need to overcome this situation.

    Make Listbox appear on click #19347



    Facing similar kind of issue. Please let me know the solution.

    Make Listbox appear on click #19350

    Peter Stoev

    Hi vijaybabu,

    If you would like to hide the listbox when you click anywhere, check for the Click Coordinates. If the click is outside the widget, hide it. If it is inside the widget, do nothing.

    P.S. As far as I know, you work with “kuberasamrat” for the same company. Please, avoid double posting.

    Best Regards,
    Peter Stoev

    jQWidgets Team

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.