【JS】记一些js里遇到的各种小问题..-优快云博客

本文介绍了如何使用JavaScript操作HTML中的Select元素，包括动态添加选项、处理选择变化、清除选项及自动选中值的方法。此外，还展示了如何通过JavaScript获取页面上所有具有特定class属性的元素及其值。

1.关于select 和 options

html:

<select class="form-control validate[required]" id="select_id">
   <option value="">请选择</option>
</select>

js:

（1）异步获取并动态添加options

$.ajax({
    async:false,
    type: "post",
    url: "...",
    dataType: "json",
    success: function (data) {
        if (data == null) {
            // 没有
        }else {
            for (var i = 0; i < data.length; i++) {
                var option_type1 = $("<option>" + data[i].name + "</option >");
                option_type1.attr("value", data[i].guid);
                option_type1.appendTo("#select_id");
            }
        }
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {

    }
});

（2）同时有几个select相关时的操作

$("#select_id").change(function(){
    var select_value = $(this).children('option:selected').val();   //获取被选中的option的值
    //操作...
})

（3）删除options

$("#select_id").empty();    //empty是将所有的option清空，remove可以根据下标删除
------------------或者-----------------------
var obj = document.getElementById("select_id");
var count = obj.options.length;
for(var i = 0;i<count;i++){
    obj.options.remove(1);//每次删除下标都是1，这样可以保留下标为0的“请选择”
}

（4）页面若有值，需自动选中option内容

要在html里加入一个隐藏的input放select的值

<input type="hidden" id="select_hidden" value="${select_value}">

js自动选中：

var select_value = $("#select_hidden").val();
$("#select_id").val(select_value);

2.获取所有class的值

jsp:

<c:forEach var="teacher" items="${teacherList}">
    <input type="hidden" class="guid_hidden" value="${teacher.guid}">
    <input type="hidden" id="time_hidden_${teacher.guid}" value="${teacher.createTime}">
</c:forEach>

javascript:

<script type="text/javascript">
    var guids = $(".guid_hidden");   //获取所有class
    for(var i=0;i<guids.length;i++){   //循环分别获取每个class的值
        var guid = $(guids[i]).val();
        var create_time = $("#time_hidden_" + guid).val();   //运用
        .......
    }
</script>

转载于:https://my.oschina.net/u/3024515/blog/792946