追加一个选择下拉与jQuery和设置它的值
问题描述:
<!DOCTYPE html>
<html>
<head>
<title>TimeSheet Edit Page</title>
<link rel="stylesheet" type="text/css" media="screen" href="jqueryui/css/redmond/jquery-ui-1.10.3.custom.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jqGrid/css/ui.jqgrid.css" />
<script src="jquery/jquery-2.0.0.min.js" type="text/javascript"></script>
<script src="jqueryui/js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
<script src="jqGrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="jqGrid/js/minified/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
jTimesheetid = "";
jTimesheetweekending = "";
jJobsSelect = "";
$(document).ready(function() {
$.ajax({
type: "POST",
url: "php.scripts/timesheet.getsession.php",
data: {},
async: false
}).done(function(msg) {
obj = JSON.parse(msg);
jTimesheetid = obj.timesheetid;
jTimesheetweekending = obj.timesheetweekending;
});
jQuery('#h3Timesheetid').text("Time Sheet ID: " + jTimesheetid);
jQuery('#h3Timesheetweekending').text("Time Sheet Week Ending: " + jTimesheetweekending);
$.ajax({
type: "POST",
url: "php.scripts/buildselect.jobs.php",
data: {},
async: false
}).done(function(msg) {
jJobsSelect = msg;
});
//Check the database for any tablets.(AJAX)
//On return from AJAX
//If there are no tablets display a message that there are no tablets to display
//If there are tabblets in the database display each tablet
$.ajax({
type: "POST",
url: "php.scripts/tablet.getdata.php",
data: {},
async: false
}).done(function(tablets) {
obj = JSON.parse(tablets);
if (obj == "") {
jQuery("#pMsg").html('No rows to display.');
} else {
for (var i = 0; i < obj.length; i++) {
console.log(obj[i].JobNo);
//for each tablet in the database display the tablet in the client area
$("body").append("<div id=\"tablet" + obj[i].idtablets + "\" style=\"margin: 5px 0px 0px 0px; width: 1102px; border: 1px solid grey; height: 200px;\"></div>");
$("#tablet" + obj[i].idtablets).append("<div id=\"leftcolumn" + obj[i].idtablets + "\" style=\"width: 200px; float: left; height: 200px;\"></div>");
$("#leftcolumn" + obj[i].idtablets).append("<div style=\"width: 196px; border: 1px solid red; height: 48px;\"><p>JobNo</p></div>");
$("#leftcolumn" + obj[i].idtablets).append("<div style=\"width: 196px; border: 1px solid red; height: 48px;\">" + jJobsSelect.toString() + "</div>");
}
}
});
$("body").append("<input type=\"button\" id=\"tabletadd\" value=\"tablet.add\" />");
});
</script>
<script type="text/javascript">
</script>
</head>
<body>
<h3 id="h3Timesheetid">Time Sheet ID:</h3>
<h3 id="h3Timesheetweekending">Time Sheet Week Ending Day:</h3>
<p id="pMsg"></p>
<script type="text/javascript">
$("#tabletadd").click(function() {
alert("Handler for .click() called.");
});
</script>
</body>
</html>
在这种情况下jJobsSelect
包含一些文本,构成了选择下拉:追加一个选择下拉与jQuery和设置它的值
<select><option value="328">328</option><option value="329">329</option></select>
select语句下拉会出现在我的HTML作为但是我应该设置它的当前选定值等于obj[i].JobNo
的值。添加后选择的当前选定值是否等于obj[i].JobNo
有什么方法?我也正在寻找一种方法来将onChange
事件附加到每个选择下拉菜单中。
在此先感谢...
答
的
$("#leftcolumn" + obj[i].idtablets).append("<div style=\"width: 196px; border: 1px solid red; height: 48px;\">" + jJobsSelect.toString() + "</div>");
后添加
var selectElement = $("#leftcolumn" + obj[i].idtablets).find('select');
selectElement.find('options').filter(function(){
return this.value.toLowerCase() === obj[i].JobNo.toString().toLowerCase();
}).prop('selected', true);
selectElement.on('change', function(){
// handle change event here..
});
我没有看到那里的'select'被追加?我错过了吗? – tymeJV 2013-05-09 20:15:39
jJobsSelect表示选择的HTML。 – Giuseppe 2013-05-09 21:04:55