关于select标签的常用方法

案例：
<div class="select_div">
                                            <select name="" id="prov">
                                                <option value="320000">江苏省</option>
                                            </select>
                                            <select name="" id="city">
                                                <option value="320100">南京</option>
                                            </select>
                                            <select name="" id="county">
                                                <option value="320115">江宁区</option>
                                            </select>
                                        </div>
1、获取被选中的省份id（获取当前选中项的value）
var prov_id = $("#prov").find("option:selected").val();
2、获取被选中的省份名称（获取当前选中项的text）
var prov_name = $("#prov").find("option:selected").text();
3、设置被选中，增加attr属性值
$("#prov").find("option[value='"+province_id+"']").attr("selected",true);//设置省份province_id被选中

$("#prov").find("option[value='"+preenter.province_id+"']").trigger("change"); //触发change事件
4、jQuery操作“select”标签
$('#prov option:first').val();//获取第一个option的值
$('#prov option:last').val();//最后一个option的值
$('#prov option:eq(1)').val();获取第二个option的值
$('#prov option:selected').val();//获取选中的值,或者$('#prov').val();
4、小案例
//显示不同文本类型的数据被选中
function loadTEXT(comcode) {
   $.ajax({
       type: "post",
       url: “",
       async: true,
       data: {
           comcode: comcode
       },
       dataType: "json",
       success: function(result) {
           var PreTextList = result.result_info.PreTextList;
           for(var i = 0; i < PreTextList.length; i++) {
               str = '<div class="row w810">' +
                   '<button id="del4" class="del" title="删除" value=' + PreTextList[i].id + '>删除</button>'+
                   '<div class="col-md-6 left_div">' +
                   '<div class="input-group ">' +
                   '<input type="hidden" class="form-control id" value=' + PreTextList[i].id + '>' +
                   '<span class="input-group-addon"><sup class="fc_red">*</sup>报告类型</span>' +
                   '<div class="select_div">' +
                   '<select name="" id="sel'+i+'" style="width: 270px;" class="text_type">' +
                   '<option value="1">企业历史沿革情况说明</option>' +
                   '<option value="2">公司上市计划和发展规划说明</option>' +
                   '<option value="3">公司重大事项报告</option>' +
                   '<option value="4">企业投资情况</option>' +
                   '<option value="5">企业聘请中介机构情况</option>' +
                   '</select>' +
                   '</div> ' +
                   '</div> ' +
                   '</div> ' +
                   '<div class="col-md-6 right_div">' +
                   '<div class="input-group ">' +
                   '<span class="input-group-addon"><sup class="fc_red">*</sup>报告内容</span>' +
                   '<input type="text" class="form-control text" value=' + PreTextList[i].text + '>' +
                   '</div>' +
                   '</div>' +
                   '</div>';
               $("#text").append(str);
               $("#sel"+i).val(PreTextList[i].text_type); //设置id属性值与option的value值相对应，实现被选中

           }
       },
       error: function() {
           msg("服务器发生异常，请稍后再试！");
       }

});
}

ps:jsp页面中，经常使用c:if标签来实现动态默认选中

<select name="provlist" id="provlist" ">
<c:forEach items="${provlist}" var="prov" >
<option value="${prov.id}" <c:if test="${prov.id==id}">selected</c:if> > ${prov.name}</option>
</c:forEach>
</select>

关于select标签的常用方法

猜你喜欢