How to create custom drop down in jquery + jquery mobile

Question

Can you please tell me how to create a custom drop down in jQuery mobile?

I need to create a button that looks like a dropdown and onclick will present a popup div with the options listed. When user selects an option the popup would close and set the value of the button to the selected item.

I need hacky way to do things. It's the only way I know. So that it look like in same on all platforms?

Answer 1

use this code:

JsFiddle demo.

HTML:

<a href="index.html" data-role="button" id="Click">DropDown</a>
<a href="#"  data-role="button" id="Drop">Click Here</a>
<div id="container">
<div id="fixed">
    <a href="#" name="test1">test1</a>
    <a href="#" name="test2">test2</a>
    <a href="#" name="test3">test3</a>
    <a href="#" name="test4">test4</a>
</div>
</div>

CSS:

#fixed{
    display:table;
    position:fixed;
    width:46%;
    height:46%;
    top:25%;
    left:25%;
    background:#fefefe;
    border:5px solid grey;
    border-radius:10px;
    padding:2%;
    z-index:2;
}
#container{
    position:fixed;
    width:100%;
    height:100%;
    background:#000;
    opacity:0.5;
    top:0;
    display:none;
}

#fixed a{
    display:table-row;
    text-align:center;
}

JQuery:

$( "#Click" ).click(function() {
  alert( "Handler for .click() called." );
});
$( "#Drop" ).click(function() {
  $("#container").show();
});

$( "#container" ).click(function() {
  $("#container" ).hide();
});

$( "#fixed a" ).click(function() {
  document.getElementById('Drop').innerHTML=this.name;
});