I want to create a search tab that contains a lot of options. when the user select an option, that option will open a file which saved as a .txt file. I use jQuery mobile.
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="css/jquery.mobile.css" />
<link rel="stylesheet" href="css/themes/interface.min.css" />
<link href="css/style-slide.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
<![endif]-->
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile.js"></script>
<script src="js/jquery.dropdownPlain.js"></script>
<script src="js/modernizr-1.5.min.js"></script>
<link rel="stylesheet" href="jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.0a4.1.min.js"></script>
<style type="text/css">
.ui-page{
background: transparent url(cute.png);
}
</style>
</head>
<body>
<div data-role="page" class="type-home" data-theme="c">
<div data-role="header" data-theme="c">
<center><img src="logo.png" width="300" height="100" alt="name" /></center>
</div>
<div data-role="content">
<div class="content-primary">
<ul data-role="listview" data-filter="true" data-inset="true" data-filter-placeholder="What do you want to search?"/>
<li><a href="saya.txt">Apa khabar</a></li>
</ul>
</div><!--/content-primary -->
</div>
</body>
for this you have to save the path of the text file in the value of the option in select and may be you can do this dynamically as below
<select id="myselect">
<option value="url_to_text_file_on_server">link</option>
</select>
then to open the text file you can use the window.location of javascript for opening the html file as below
$("#myselect").change(function(){
window.location = $( "#myselect option:selected" ).val();
});
jsFiddlelink See this for live demo
UPDATE
To add a select widget to your page, start with a standard select element populated with a set of option elements. Set the for attribute of the label to match the ID of the select so they are semantically associated. Wrap them in a div with the data-role="fieldcontain" attribute to help visually group it in a longer form.
for jquery mobile html part
<div data-role="fieldcontain">
<label for="myselect" class="select">Choose shipping method:</label>
<select name="myselect" id="myselect">
<option value="url_to_text_file_on_server">link</option>
</select>
</div>
script should go in document ready function in the botton
$(document).ready(function(){
$("#myselect").on("change",function(){
window.location = $( "#myselect option:selected" ).val();
});
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments