单选下拉菜单实现

1.
[root@yyjk templates]# cat displayactivemqtmp.html 
<head>
	<title>运维平台</title>
	<link rel="stylesheet" type="text/css" href="/static/Css/Monitor/readmq.css">
	<link rel="stylesheet" type="text/css" href="/static/Css/Public/header.css">
	<link rel="stylesheet" type="text/css" href="/static/Css/Public/menu.css">
</head>
<body>
	<include file="Public:header"/>
	<div class="content">
		<include file="Public:menu"/>
		<div class="con fl">
			<label class="condition">应用</label>
			<select name="app" class="monitor">
			</select>
			<input type="submit" value="查询" class="readmq">
		</div>
                     	<table class="gridtable fr">
                        <th>APP</th><th>IP</th><th>QUEUE</th><th>Number Of Pending Messages</th>
		</table>
	</div>
</body>
<script type="text/javascript" src="/static/Js/jquery-2.2.2.min.js"></script>
<script type="text/javascript" src="/static/Js/Monitor/readmq.js"></script>
<!script type="text/javascript" src="/static/Js/Public/menu.js"><!/script>
<script type="text/javascript" src="/static/Js/Public/ajax.js"></script>
</html>
<html>

select distinct ip  from DEVOPS.mon_activemq


2.

[root@yyjk templates]# cat  /django/mysite/static/Js/Monitor/getactivemqip.js
$(function(){
    var _app_select = $("select[name='app']");
	var _sub_btn = $(".readmq");
	getapp("pro");
	function getapp(env){
		var data = {};
		var successfn = function(jdata){
			var _HTML = "";
			_app_select.html("");
			$.each(jdata,function(i,val){
				_HTML = _HTML + "<option value="+jdata[i][0]+">"+jdata[i][0]+"</option>";
			});
			_app_select.html(_HTML);
		};
		var errorfn = function(jdata){
			alert("数据返回出错");
		};
		
		$.ajax({
            type: "get",
            data: data,
            url: "/api/getactivemqip",
			dataType: "json",
            success: function(d){
                successfn(d);
            },
            error: function(e){
                errorfn(e);
            }
        });

	}
	
	_sub_btn.on("click",function(){
		
		var app = _app_select.val();
		
		var data = {};
		
		data.condition = app;
		
		var successfn = function(jdata){
                    var jdata = eval(jdata);
                     $(".gridtable").empty();
                var _HTML="<tr><th>APP </th><th>IP</th><th>QUEUE</th><th>Number Of Pending Messages</tr>"
                $.each(jdata,function(i,val){
                _HTML=_HTML+"<tr><td>"+jdata[i][0]+"</td><td>"+jdata[i][1]+"</td><td>"+jdata[i][2]+"</td><td>"+jdata[i][3]+"</td></tr>";
                 });
                $(".gridtable").html(_HTML); 
		};
		var errorfn = function(jdata){
			alert("数据返回出错");
		};
		$.ajax({
            type: "post",
            data: data,
            url: "/api/search_activemq_ip/",
            dataType: "json",
            success: function(d){
                  successfn(d);
            },
            error: function(e){
                errorfn(e);
            }
        });
	});
	
	}
)

这里就实现了从后台接口拿地址,写入到选择器select[name='app']" 中


3.后台接口:

def search_activemq_ip(req):
    print req.get_full_path()
    print req.POST['condition']
    condition= req.POST['condition']
    if condition:
       conn= MySQLdb.connect(
        host='127.0.0.1',
        port = 3306,
        user='root',
        passwd='1234567',
        db ='DEVOPS',
        charset="UTF8",
        )
       cur = conn.cursor()
       a = cur.execute("select user,password,name,ip,port from mon_activemq  where ip=%s ",[condition])
       info = cur.fetchone()
       print info
       user=info[0].encode('utf-8')
       code=info[1].encode('utf-8')
       app=info[2].encode('utf-8')
       ip=info[3].encode('utf-8')
       port=info[4].encode('utf-8')
       print user
       print type(user)
       print app
       print type(app)
       output=commands.getoutput("/home/mqm/sbin/activemq/view_activemq %s %s %s %s %s "  %(user,code,app,ip,port) )
       print output


 var _app_select = $("select[name='app']");
        console.log('1111'+_app_select);
		
		这里打印出来的是1111[object Object]
		
		

原文地址:https://www.cnblogs.com/hzcya1995/p/13349329.html