HTML jq onchage 事件监听,如HTML select onchage 值改变时候触发事件,当然可能不止select 可以是input 或者 div其他标签值。
这里以select举例场景:
当选择所属主链select时候,请求接口获取当前主链下的币种列表赋值到所属币种select。
1、HTML代码
<form id="form-data"> <div class="col-md-3"> <label >所属主链</label> <select name="chain" id="getTokenList"> <option value="">请选择主链</option> <option value="tron">波场</option> <option value="eth">以太坊</option> </select> </div> <div class="col-md-3"> <label >所属币种</label> <select name="token" id="tokenList"> <option value="">请选择币种</option> </select> </div> </form>
2、JavaScript 监听事件/jq onchange事件
<!--根据主链 获取 币种列表--> <script> $("#getTokenList").on('change',function () { //点击的主链 let chain = $(this).val(); $.ajax({ type:"POST",//请求方式 url:"{:url('PayConfigCurrency/getTokenList')}",//请求路径 data:{ chain : chain }, //cache:false,//false是不缓存,true为缓存 //async:true,//true为异步,false为同步 // 用于设置响应体的类型 注意 跟 data 参数没关系!!! dataType: 'json', beforeSend:function(){ //请求前 //showLoading(); }, success:function(obj){ if (obj.code == 0){ //toastr.success(obj.msg); //赋值 let htmlData = '<option value="">请选择币种</option>'; $.each(obj.data,function(index,value){ htmlData += '<option value="'+value.id+'">'+value.title+'</option>'; }); $("#tokenList").html(htmlData); }else { console.log('success error',obj); //toastr.error(obj.msg) } }, complete:function(obj){ //hideLoading(); }, error:function(obj){ //请求失败时 console.log('error',obj); alert("请检查是否自身网络错误,或者是服务器异常了"); } }); }); </script>
3、接口返回的数据格式
{ "code": 0, "msg": "获取币种列表", "data": [ { "id": 5, "title": "ETH", }, { "id": 6, "title": "USDT", }, { "id": 7, "title": "ERC20", } ] }