blob: 7a250a5497613613dcabb416d216f49d19296e21 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Demo Page for jQuery UI selectmenu</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
<link type="text/css" href="../../themes/base/jquery.ui.selectmenu.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.5.1.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.selectmenu.js"></script>
<style type="text/css">
/*demo styles*/
body {font-size: 62.5%; font-family:"Verdana",sans-serif; }
fieldset { border:0; margin: 20px 0 0 0;}
label,select,.ui-select-menu { float: left; margin-right: 10px; }
select { width: 200px; }
/*select with custom icons*/
body a.customicons { height: 2.8em;}
body .customicons li a, body a.customicons span.ui-selectmenu-status { line-height: 2em; padding-left: 30px !important; }
body .video .ui-selectmenu-item-icon, body .podcast .ui-selectmenu-item-icon, body .rss .ui-selectmenu-item-icon { height: 24px; width: 24px; }
body .video .ui-selectmenu-item-icon { background: url(images/24-video-square.png) 0 0 no-repeat; }
body .podcast .ui-selectmenu-item-icon { background: url(images/24-podcast-square.png) 0 0 no-repeat; }
body .rss .ui-selectmenu-item-icon { background: url(images/24-rss-square.png) 0 0 no-repeat; }
</style>
<script type="text/javascript">
$(function(){
var speedA = $('select#speedA').selectmenu({
select: function(event, options) {
$.ajax({
data: "get_data=" + options.value,
type: "GET",
// you need a serversite script which checks the username
url: "ajax/get_data.php",
success: function(value) {
// add the returned HTML (the new select)
$("#result_data").html(value).find("select").selectmenu();
}
});
}
});
});
</script>
</head>
<body>
<form action="#">
<h2>Ajax Example</h2>
<fieldset>
<label for="speedA">Select an Option:</label>
<select name="speedA" id="speedA">
<option value="0">Default</option>
<option value="1">Ajax Call</option>
</select>
</fieldset>
</form>
<div id="result_data"></div>
</body>
</html>
|
