如何在jquery + jquery mobile中创建自定义下拉列表

How to create custom drop down in jquery + jquery mobile

本文关键字：jquery 创建 自定义 下拉列表 mobile      更新时间：2023-09-26

你能告诉我如何在jQuery mobile中创建自定义下拉列表吗？

我需要创建一个看起来像dropdown的按钮，onclick将显示一个带有所列选项的弹出div。当用户选择一个选项时，弹出窗口将关闭并将按钮的值设置为所选项目。

我需要黑客的方式来做事。这是我唯一知道的方式。这样它在所有平台上看起来都一样？

使用以下代码：

JsFiddle 演示。

.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;
});
相关文章：