Appending a select drop down with jQuery and setting it's value - 


<!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 database tablets.(ajax)                 //on return ajax                 //if there no tablets display message there no tablets display                 //if there tabblets in 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 display.');                     } else {                         (var = 0; < obj.length; i++) {                             console.log(obj[i].jobno);                              //for each tablet in database display tablet in 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 .click() called.");             });         </script>     </body>  </html>

in case jjobsselect contains text makes select drop down:

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

the select statement drop down appear in html supposed need set it's selected value equal value of obj[i].jobno. there way set selected value of select equal obj[i].jobno after appended? looking way attach onchange event each select drop down after appended well.

thanks in advance...

after 

$("#leftcolumn" + obj[i].idtablets).append("<div style=\"width: 196px; border: 1px solid red; height: 48px;\">" + jjobsselect.tostring() + "</div>");

add 

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.. });

Comments

Post a Comment

Popular posts from this blog

linux - xterm copying to CLIPBOARD using copy-selection causes automatic updating of CLIPBOARD upon mouse selection -

i've tried various ways coerce xterm (versions 285 , 292) copy selection clipboard clipboard whenever press ctrl-shift-c. promising way far has been, in ~/.xresources, put this: xterm*vt100.translations: #override \ ctrl shift <keypress> c: copy-selection(clipboard) \n\ ctrl shift <keypress> v: insert-selection(clipboard) ctrl-shift-v works perfectly, copying has nuance... if restart xterm, highlighting text puts things in primary clipboard; expected, proper, default behavior. if hit ctrl-shift-c, copies current selection clipboard clipboard. the bug, however, if highlight text after first time pressed ctrl-shift-c, you'll see highlighting copies both primary and clipboard. cannot figure out how stop xterm updating clipboard upon selection... , doesn't make sense me in first place. i said, @ specific point in time, copy selection clipboard... yet starts updating automatically upon selection after doing once... anyone have workaround...
Read more

c++ - qgraphicsview horizontal scrolling always has a vertical delta -

Image
i've subclassed qgraphicsview custom canvas used in cad application. i've reimplemented qgraphicsview::wheelevent check keyboard modifiers control key and, if control key pressed, zoom. i'm trying implement horizontal scroll when user holds shift , uses wheel. the problem i'm having horizontal scrolling always scrolls 0.279. not huge problem, hugely annoying , points else being wrong. so, here questions: is right way implement horizontal scrolling? if not, is? how eliminate delta of 0.279? thanks in advance. code , sample output below void myview::zoom(int delta) { double factor = pow(1.2, delta/abs(delta)); this->scale(factor, factor); } void myview::scrollhorizontal(int level) { qpointf center = maptoscene(viewport()->rect().center()); qdebug() << "center: " << center.x() << ", " << center.y(); centeron(qpointf(center.x() - level, center.y())); } void myview::wheelevent(qwheeleve...
Read more