HTML select 点击事件监听


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",
        }
    ]
}


云天阁
非我而当者,吾师也;是我而当者,吾友也;谄谀我者,吾贼也。
搜索