IDEA HTML js设置值 .value val() 赋初始值(赋默认值)(数据初始化) 普通下拉框(字典下拉框) 只读绑定下拉框选值事件选择空格 Integer参数 input输入完成事件

tanzongbiao

已于 2022-08-10 16:40:00 修改

阅读量1.2k

点赞数

分类专栏： BootStrap 文章标签： html javascript 前端

于 2021-10-21 11:18:11 首次发布

本文链接：https://blog.csdn.net/tanzongbiao/article/details/120882887

版权

BootStrap 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

空格符(注意分号不能省)

<div class="col-md-2">
    <div class="row">
        <label for="serviceType">类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：</label>
        <select class="form-control" id="serviceType" style="width: 120px;margin-right: 5px"></select>
    </div>
</div>

js取值

var returnVal = $("#childReturnData").val();

var garageId = $("#garageId").attr("value");

js设置值

//方式一
document.getElementById("employeeName").innerHTML = data.employeeName;

//方式二
document.getElementById("username").value = username;

//方式三
$("#type").val(1);

js获取无id,无name的网页元素

//方法一：JQuery中根据属性或属性值获得元素
$("button[aria-label='Export']").attr('onclick','').click( eval(function(){
    alert(888);
}));
$("button[aria-label='Export']").attr('onclick','').click(function () {
    alert(888);
});

//方法二：getElementsByTagName
var buttons = document.getElementsByTagName("button");
if(buttons && buttons.length > 0){
    var button = null;
    for (var i=0; i<buttons.length; i++){
        button = buttons[i];
        if(button.getAttribute("aria-label") == "Export"
            && button.getAttribute("title") == "Export data"){
            //绑定点击事件
            button.onclick = function () {
                alert(999);
            };
        }
    }
}

js为元素添加属性(设置属性)

var form = $("<form></form>").attr("action", url).attr("method", "post");
form.append($("<input></input>").attr("type", "hidden").attr("name", "headNames").attr("value", headNames));

JS 通过名称获取属性的值 getAttribute

document.getElementsByTagName("a")[0].getAttribute("target");

js获取属性设置属性删除属性

获取属性：attr(attrName)

设置属性：attr(attrName, value)

删除属性：removeAttr(attrName)

示例：

$("#pic").attr('width',widthInt * 3 + 'px');//426px

赋初始值(赋默认值)(数据初始化)

//情景一：普通输入框
//赋初始值(赋默认值)(数据初始化)
if($('#productNum').val() == ""){
    $('#productNum').val(0);
}


//情景二：下拉框
var currentUseFlag = $('#currentUseFlag').val();
//赋初始值
if(currentUseFlag == ""){
    currentUseFlag = 1;
}
//默认为空
var options = '<option selected="selected" disabled="disabled" style="display: none" value=""></option>';
for (var i=0; i<data.length; i++) {
    if(data[i].key == currentUseFlag) {
        options += '<option selected value=' + data[i].key + '>' + data[i].value + '</option>';
    } else {
        options += '<option value=' + data[i].key + '>' + data[i].value + '</option>';
    }
}
$("#useFlag").html(options);

普通下拉框(字典下拉框)

html

编辑

<input id="currentUseFlag" name="currentUseFlag" type="hidden" th:value="${info?.useFlag}">


<div class="form-group row">
    <label class="col-md-2 col-sm-2 text-right" for="useFlag"><span class="text-danger">*</span>是否启用：</label>
    <div class="col-md-4 col-sm-4">
        <select class="form-control" id="useFlag" name="useFlag" required="required"></select>
    </div>
</div>

查询

<div class="col-md-2">
    <div class="row">
        <label for="studentStatus" style="display: inline-block;width: 65px;text-align: right;line-height: 35px">学员状态：</label>
        <select class="form-control" id="studentStatus" onkeydown="if(event.keyCode == 13){return false;}" style="user-select: all;width: 120px;margin-right: 5px"></select>
    </div>
</div>

1）编辑

//下拉框
$.ajax({
    url: '/diction/findMappingByType',
    type: 'post',
    async: true,//true为异步，false为同步
    data: {type: '4'},
    success: function(data) {
        var currentUseFlag = $('#currentUseFlag').val();
        //赋初始值
        if(currentUseFlag == ""){
            currentUseFlag = 1;
        }
        //默认为空
        var options = '<option selected="selected" disabled="disabled" style="display: none" value=""></option>';
        for (var i=0; i<data.length; i++) {
            if(data[i].key == currentUseFlag) {
                options += '<option selected value=' + data[i].key + '>' + data[i].value + '</option>';
            } else {
                options += '<option value=' + data[i].key + '>' + data[i].value + '</option>';
            }
        }
        $("#useFlag").html(options);
    }
});

2）查询

//下拉映射(分类)
$.ajax({
    url: '/diction/findMappingByType',
    type: 'post',
    async: true,//true为异步，false为同步
    data: {type: '21'},
    success: function(data) {
        //默认为空
        var options = '<option selected="selected" disabled="disabled" style="display: none" value=""></option>';
        for (var i=0; i<data.length; i++) {
            options += '<option value=' + data[i].key + '>' + data[i].value + '</option>';
        }
        $("#classOfProject").html(options);
    }
});

3）表格

//Map映射 后面格式化显示时使用
var dictionMapGlobal = null;
//下拉框
$.ajax({
    url: '/diction/findMappingByType',
    type: 'post',
    data: {type: '9'},
    async: true,//true为异步，false为同步
    success: function(data) {
        dictionMapGlobal = data;
    }
});


{
    field: 'couponType',
    title: '分类',
    align: 'center',
    formatter: function (value, row, index){
        if(dictionMapGlobal != null && dictionMapGlobal.length > 0){
            var i = 0;
            while (i < dictionMapGlobal.length){
                if(dictionMapGlobal[i].key == value){
                    var valueNew = dictionMapGlobal[i].value;
                    if(value == 0){
                        valueNew = '<span class="badge badge-success">' + dictionMapGlobal[i].value + '</span>';
                    }else if(value == 1){
                        valueNew = '<span class="badge badge-warning">' + dictionMapGlobal[i].value + '</span>';
                    }
                    return valueNew;
                }
                i++;
            }
        }
    }
}


//普遍非变色映射
formatter: function (value, row, index){
    if(dictionMapGlobal2 != null && dictionMapGlobal2.length > 0){
        var i = 0;
        while (i < dictionMapGlobal2.length){
            if(dictionMapGlobal2[i].key == value){
                return dictionMapGlobal2[i].value;
            }
            i++;
        }
    }
}

4）查询及表格

<label for="studentStatus" style="display: inline-block;width: 65px;text-align: right;line-height: 35px">学员状态：</label>
<select class="form-control" id="studentStatus" onkeydown="if(event.keyCode == 13){return false;}" style="user-select: all;width: 120px;margin-right: 5px"></select>

//Map映射 后面格式化显示时使用
var dictionMapGlobal = null;
//下拉框(学员状态)
$.ajax({
    url: '/diction/findMappingByType',
    type: 'post',
    data: {type: '12'},
    async: true,//true为异步，false为同步
    success: function(data) {
        dictionMapGlobal = data;
        //默认为空
        var options = '<option selected="selected" disabled="disabled" style="display: none" value=""></option>';
        for (var i=0; i<data.length; i++) {
            options += '<option value=' + data[i].key + '>' + data[i].value + '</option>';
        }
        $("#studentStatus").html(options);
    }
});


{
    field: 'studentStatus',
    title: '学员状态',
    align: 'center',
    formatter: function (value, row, index){
        if(dictionMapGlobal != null && dictionMapGlobal.length > 0){
            var i = 0;
            while (i < dictionMapGlobal.length){
                if(dictionMapGlobal[i].key == value){
                    var valueNew = value;
                    if(value == -1){
                        valueNew = '<span class="badge badge-success">' + dictionMapGlobal[i].value + '</span>';
                    }else if(value == 0){
                        valueNew = '<span class="badge badge-warning">' + dictionMapGlobal[i].value + '</span>';
                    }
                    return valueNew;
                }
                i++;
            }
        }
    }
}

只读

required

readonly

required="required" readonly="readonly"

js设置只读(注意：对下拉框无效下拉框时需用disabled)

readonly 只对 <input> 和 <textarea> 标签有效

$("#interviewStatus").attr("readonly",true);
$("#interviewStatus").attr("readonly",false);

disabled

$("#interviewStatus").attr("disabled",true);

$("#interviewStatus").attr("disabled",false);

//面签状态初始化(默认为只读)
var serviceType = $("#serviceType").val();
if(serviceType != "面签问题"){
    $("#interviewStatus").attr("readonly",true);
}

下拉框选值后触发事件(下拉框选值事件)

方式一：绑定change事件(所选)

//绑定下拉框选值事件
$("#serviceType").bind("change",serviceTypeChange);
function serviceTypeChange(){
    //面签状态初始化(默认为只读)
    var serviceType = $("#serviceType").val();
    if(serviceType != "面签问题"){
        $("#interviewStatus").attr("disabled",true);
    }else{
        $("#interviewStatus").attr("disabled",false);
    }
}
//serviceTypeChange();//有bug,下拉框值未加载完毕

方式二：直接html中设置onchange值

<select class="form-control" id="serviceType" name="serviceType" required="required" onchange="alert(111)"></select>

input输入完成事件

$("#idCard").bind("change",function (){
});

分隔线(横)

<div class="ln_solid"></div>

清空(重置)

$("#form_Condition").resetForm();

Integer参数

//构造Pageable
//固定不变的两个分页参数
int page=0;
if(reqMap.get("page").toString() != null){
    page = Integer.parseInt(reqMap.get("page").toString());
}
int size=3;
if(reqMap.get("size").toString() != null){
    size = Integer.parseInt(reqMap.get("size").toString());
}


predicates.add(cb.equal(root.get("enabledFlag"), 1));

if(!(reqMap.get("studentName") == null || reqMap.get("studentName").toString().equals(""))) {
    predicates.add(cb.like(root.get("studentName"),"%" + reqMap.get("studentName").toString() + "%"));
}
if(!(reqMap.get("studentStatus") == null || reqMap.get("studentStatus").toString().equals(""))) {
    predicates.add(cb.equal(root.get("studentStatus"),reqMap.get("studentStatus").toString()));
}
if(!(reqMap.get("status") == null || reqMap.get("status").toString().equals(""))) {
    predicates.add(cb.equal(root.get("status"),reqMap.get("status").toString()));
}

tanzongbiao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IDEA HTML js设置值 .value val() 赋初始值(赋默认值)(数据初始化) 普通下拉框(字典下拉框) 只读绑定下拉框选值事件选择空格 Integer参数 input输入完成事件

document.getElementById("employeeName").innerHTML = data.employeeName;
复制链接

扫一扫