动态循环插入<option>,鼠标点击从数据库调取data

1. 针对问题

1) 在html页面动态循环插入从数据库调取过来的value值,插入<option>value</option>;

2)   鼠标点击value值,获取对应的数据库信息;

2. 解决办法

1)option的循环插入

 <select id="sensorNumFilterInput" name="sensorNumFilterInput" style=" 110px;">
   <option id="PresensorNumFilterInput" value="">输入编号</option>                                                                      
 </select>
    // 气压传感器循环插入编号名单
    function PreNameOption(){
        $.ajax({ 
            url : "http://localhost:8080/tianjin-ssms-meach/Pre_tableNameServlet", 
            type : "post", 
            success : function(PreTableName)
            {    
                var  dataPreTableName = eval(PreTableName); 
                  $('#sensorNumFilterInput').empty();
           for(i=0;i<dataPreTableName.length;i++){                                                                
                        $("#sensorNumFilterInput ").append('<option id="'+i+'">'+dataPreTableName[i]+'</option>');//写入表格数据 
                    }  
                      }                 
        });
    }

ps:option 里面的id随着for 循环依次增加;

2) 点击value,获取对应的数据库信息;

    //获取点击的传感器编号,进一步得到数据
    function text(){
        var obj = document.getElementById("sensorNumFilterInput"); //获取客户端输入的值
        var Sensortxt = obj.options[obj.selectedIndex].text;
        if(Sensortxt[0]=="p"){
            Sensortxt = "P"+ Sensortxt[1]+ Sensortxt[2]+ Sensortxt[3]+ Sensortxt[4]+ Sensortxt[5]+ Sensortxt[6];
        }
        //如果到时候添加温度 湿度 根据第一个字母,switch case 就OK了
        $.ajax({ 
            url : "http://localhost:8080/tianjin-ssms-meach/Pre_checkDataServlet?Pre_checkName="+Sensortxt+"", //此值赋给dopost里面的变量
            type : "post", 
            success : function(Pre)//所有气压传感器数据
            {    
              var data = eval(Pre); 
               for(i=0;i<data.length;i++){
                 if(data[i].name == Sensortxt){
                         var tbody='<tr>'
                          tbody= tbody+'<td>'+data[i].time+'</td>'+'<td id="n2">'+data[i].name+'</td>'+'<td>'+data[i].num+'</td>'+'<td>'+data[i].set_temp+'</td>'
                                +'<td>'+data[i].set_pre+'</td>'+'<td>'+data[i].collect_temp+'</td>'+'<td>'+data[i].collect_pre+'</td>'+'<td>'+data[i].measure_temp+'</td>'
                                +'<td>'+data[i].measure_pre+'</td>'+'<td>'+data[i].temp_org+'</td>'+'<td>'+data[i].pre_org+'</td>'  //展现在前端页面上
                          tbody = tbody+'</tr>'
                          $("#originalDataInfoQueryTable tbody").append(tbody);//写入表格数据 
                 }                     
                } 
            }
        });
    }

  

原文地址:https://www.cnblogs.com/lwcwj/p/13037795.html