ajax初始化和select-option ：change获取相应的值

电玩女神 2022-06-04 04:25 146阅读 0赞

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>无标题文档</title><script type="text/javascript" src="jquery-3.0.0.min.js"></script>  
</head>  
<style>  
  .container \{  
            width: 800px;  
            height: 600px;  
            border: 2px solid \#000;  
        \}  
.grade-list \{  
            height: 40px;  
            border-bottom: 1px solid \#999;  
            margin-bottom: 20px;  
            margin-top: 20px;  
        \}  
.grade-list  span\{  
display:block;  
width:20px;  
height:20px;  
border: 1px solid \#000;  
/\*浮动一次\*/  
float: left;  
\}  
.label\_btn \{  
/\*浮动2次\*/  
            float: left;  
            margin-right: 10px;  
        \}  
.butActive \{  
            background: violet;  
        \}  
          .second\_box \{  
            position: relative;  
        \}  
  
  
  
  
</style>  
  
  
<body>  
    
   <div class="container">  
      
        <div class="grade-list clearfix" id="tel">  
        <div class="label\_btn clearfix"><span id="50023643" class="cc"></span><label>棒球鞋</label></div>  
        <div class="label\_btn clearfix"><span id="50005900" class="cc"></span><label>足球鞋</label></div>  
        <div class="label\_btn clearfix"><span id="50023643" class="cc"></span><label>球鞋</label></div>  
        <div class="label\_btn clearfix"><span id="50005900" class="cc"></span><label>女生上衣</label></div>  
        <div class="label\_btn clearfix"><span id="125612007" class="cc"></span><label>男生上衣</label></div>  
        <div class="label\_btn clearfix"><span id="125612008" class="cc"></span><label>毛巾</label></div>  
        <div class="label\_btn clearfix"><span id="125612009" class="cc"></span><label>鸭翅</label></div>  
         <button class="indexBtn" id="loadBtn">加载</button>  
        </div>  
          
        <div class="second\_box">  
          <label>开始时间:</label> <input type="text" id="begin" placeholder="开始时间" value=""> --  
            <label>结束时间:</label> <input type="text" id="end" placeholder="结束时间" value="">  
            
            <select id="selectOption">  
<option>类目属性</option>  
<option>活跃店铺</option>  
<option>宝贝</option>  
</select>  
          
        </div>  
          
          
          
          
          
          
          
          
          
   </div>  
  
  
  
  
  
  
  
  
<script>  
//切换选项卡  
$(".label\_btn>span").click(function()\{  
$(this).toggleClass("butActive");  
\});  
  
function index(param)  
\{  
$.ajax(\{  
url:"http://211.95.60.40:16868/yanshudemo/shop",  
type:'POST',  
data:\{  
type: param  
\},  
dataType:"json",  
success:function(data)\{  
console.log(data.columns.length);  
\},error:function()\{  
  alert("数据开小差了");  
\}  
  
\})  
\}  
  
  
//初始化选中项  
        var selectop = $("\#selectOption option:selected").val();  
        index(selectop);  
  
下拉框改变事件  
$("\#selectOption").change(function()\{  
var selectop=$("\#selectOption").val();  
index(selectop);  
\})   
  
  
  
  
  
</script>  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
</body>  
</html>