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

7 篇文章 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>
在使用Select2插件中设置初始有几种方法可以选择。其中一种方法是通过使用Ajax结合数组的方式。首先,你需要使用Ajax请求获取数据数组,并将默认传递给后台。当数据返回时,你可以设置Select2的选中,然后简单地设置默认。你可以使用以下代码实现这个方法: ``` $.ajax({ url: 'your_url', method: 'GET', data: { // 发送给后台的默认参数 defaultValue: 'your_default_value' }, success: function(response) { // 获取返回的数据数组 var dataArray = response.data; // 设置Select2的选项 $("select").select2({ data: dataArray }); // 设置默认 $("select").val('your_default_value').trigger("change"); } }); ``` 另外,如果你只知道默认的`value`而不知道对应的`text`,你可以使用以下方法: ``` $.ajax({ url: 'your_url', method: 'GET', data: { // 发送给后台的默认参数 defaultValue: 'your_default_value' }, success: function(response) { // 获取返回的数据数组 var dataArray = response.data; // 创建一个新的option元素 var option = new Option('', 'your_default_value', true, true); // 将option元素添加到select中 $('select').append(option); // 初始化Select2 $('select').select2(); } }); ``` 以上是设置Select2初始的两种方法,你可以选择适合你的情况的方法来设置初始。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [select2 ajax获取数据设置默认,初始](https://blog.csdn.net/yifan_lion/article/details/79838254)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [select2 ajax 设置默认,初始](https://blog.csdn.net/phker/article/details/77650263)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值