0 
<!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，包含一些构成选择下拉列表的文本：

<select><option value="328">328</option><option value="329">329</option></select>

select 语句下拉列表确实出现在我的 HTML 中，但我还需要将其当前选定的值设置为等于obj[i].JobNo. 是否有某种方法可以将 select 的当前选定值设置为等于obj[i].JobNo附加后的值？我也在寻找一种方法来onChange在每个选择下拉列表中附加一个事件。

提前致谢...

4

1 回答 1

0

之后

$("#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..
});
于 2013-05-09T20:21:11.460 回答