追加一個選擇下拉與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事件附加到每個選擇下拉菜單中。

在此先感謝...

來源

2013-05-09 Giuseppe

我沒有看到那裏的'select'被追加？我錯過了嗎？ – tymeJV 2013-05-09 20:15:39

jJobsSelect表示選擇的HTML。 – Giuseppe 2013-05-09 21:04:55

的

$("#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-09 20:21:11

更改事件工作正常，但更改選定值的代碼尚未開始排除故障。感謝代碼。 – Giuseppe 2013-05-09 20:59:07

這是爲我做的代碼。 jQuery 2.0.0。 selectElement.val（OBJ [I] .JobNo.toString（）toLowerCase（））; – Giuseppe 2013-05-09 23:04:26

追加一個選擇下拉與jQuery和設置它的值

回答

相關問題