html select，在HTML里select标签有哪些用法

编程之家2023-11-0777次浏览

尊敬的读者，html select和在HTML里select标签有哪些用法是当前备受关注的话题，但许多人对其仍存在疑惑。在本篇文章中，我将为你提供清晰的解释和深入的分析，希望能满足你的求知欲望。

html中<select>标签用法解析及如何设置select的默认选中状态

<select>标签定义和用法

select元素可创建单选或多选菜单。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将<select>表单数据提交给服务器时包括 name属性。

<select>标签可选的属性

属性值描述

disabled disabled规定禁用该下拉列表。

multiple multiple规定可选择多个选项。

name name规定下拉列表的名称。

size number规定下拉列表中可见选项的数目。

<select>标签全局属性

<select>标签支持 HTML中的全局属性。

<select>标签事件属性

<select>标签支持 HTML中的事件属性。

数据库+javascript+html如何实现多级select下拉菜单

这个，其实比较简单

数据上来说，相当于是一个多维数组

比如，系：

计算机，中文，英语

然后是专业：

计算机->软件工程，xxx专业...

中文->汉语言文学，xxx专业...

数据库在设计上，你可以将他们都放在一个表里面，可以有这些列

id唯一id

name名称，可以是专业名称，也可以是系名称

parent指定如果是专业，是数据那个系，这里可以存成系的id，

如果是系，那么这里直接填0，表示就可以

这样的话，一个demo数据

idnameparent

1计算机系0

2软件工程1

这样，上边，后台的数据就这个节奏就可以满足，如果专业还有细分，那这个结构也可以满足

前台显示的时候，这里分成俩个select来显示就可以

第一个select用来显示系，查询parent为0的数据，显示到select里面就可以

第二个select用来显示系的专业，查询的时候，将第一个select的系id拿到，直接数据库里面查询parent为第一个select选择系的id的数据

demo

选择系：

<selectid="department"onchange="change(this)"></select>

选择专业：

<selectid="professional"></select>

//用js读取数据，然后生成代码

//根据parentid，读取数据，然后返回

functiongetData(parentId,callback){

$.ajax({

url:'test.do',//后台数据地址

data:{parentId:parentId},//请求parentid的数据

success:function(result){

alert(result);

callback(result);

}

})

}

functionrenderOptions(arr,el){//生成select的option

el.empty();

$.each(data,function(index,item){

$('<option/>').attr({

value:item.id

}).html(item.name).appendTo(el);

})

}

vardepartment=$('#department');//系的select

getData(0,function(data){//请求系的数据

department.empty();

renderOptions(data,department);//这里生成系的select

});

varprofessional=$('#professional');//专业的select

functionchange(el){//当系变化的时候

varparentId=$(el).val();//这里得到选择的系的id

getData(parentId,function(data){

professional.empty();

renderOptions(data,professional);//这里生成专业的select

});

}

就是这样的原理

后台还需要一个查询，就是根据parentid查询数据，就可以了

在HTML里select标签有哪些用法

这次给大家带来在HTML里select标签有哪些用法，在HTML里使用select标签的注意事项有哪些，下面就是实战案例，一起来看一下。

一、基本用法：

<option value="volvo">Volvo</option>

</select>其中，</option>标签可以省掉，在页面中用法

<OPTION VALUE="0">全部

<OPTION VALUE="1">湖北电大网络学习中心

<OPTION VALUE="2">成都师范学院网络学习中心

<OPTION VALUE="3">武汉职业技术学院网络学习中心

</SELECT>二、Select元素还可以多选，看如下代码：

//有multiple属性，则可以多选

</select>

//下面没有multiple属性,只显示一条，不能多选

</select>

//下面是设置了size属性的情况,如果size= 3那么就显示三条数据，注意不能多选的。

</select>1.判断select选项中是否存在指定值的Item

@param objSelectId将要验证的目标select组件的id

@param objItemValue将要验证是否存在的值

function isSelectItemExit(objSelectId,objItemValue){

var objSelect= document.getElementById(objSelectId);

var isExit= false;

if(null!= objSelect&& typeof(objSelect)!="undefined"){

for(var i=0;i<objSelect.options.length;i++){

if(objSelect.options[i].value== objItemValue){

isExit= true;

break;

}

return isExit;

}2.向select选项中加入一个Item

@param objSelectId将要加入item的目标select组件的id@param objItemText将要加入的item显示的内容@param objItemValue将要加入的item的值 function addOneItemToSelect(objSelectId,objItemText,objItemValue){ var objSelect= document.getElementById(objSelectId); if(null!= objSelect&& typeof(objSelect)!="undefined"){//判断是否该值的item已经在select中存在 if(isSelectItemExit(objSelectId,objItemValue)){$.messager.alert('提示消息','该值的选项已经存在!','info');} else{ var varItem= new Option(objItemText,objItemValue); objSelect.options.add(varItem);}}}3.从select选项中删除选中的项，支持多选多删

@param objSelectId将要进行删除的目标select组件id

function removeSelectItemsFromSelect(objSelectId){

var objSelect= document.getElementById(objSelectId);

var delNum= 0;

if(null!= objSelect&& typeof(objSelect)!="undefined"){

for(var i=0;i<objSelect.options.length;i=i+1){

if(objSelect.options[i].selected){

objSelect.options.remove(i);

delNum= delNum+ 1;

i= i- 1;

}

if(delNum<= 0){

$.messager.alert('提示消息','请选择你要删除的选项!','info');

} else{

$.messager.alert('提示消息','成功删除了'+delNum+'个选项!','info');

}

4.从select选项中按指定的值删除一个Item

@param objSelectId将要验证的目标select组件的id

@param objItemValue将要验证是否存在的值

function removeItemFromSelectByItemValue(objSelectId,objItemValue){

var objSelect= document.getElementById(objSelectId);

if(null!= objSelect&& typeof(objSelect)!="undefined"){

//判断是否存在

if(isSelectItemExit(objSelect,objItemValue)){

for(var i=0;i<objSelect.options.length;i++){

if(objSelect.options[i].value== objItemValue){

objSelect.options.remove(i);

break;

}

$.messager.alert('提示消息','成功删除!','info');

} else{

$.messager.alert('提示消息','不存在指定值的选项!','info');

}

}5.清空select中的所有选项

@param objSelectId将要进行清空的目标select组件id

function clearSelect(objSelectId){

var objSelect= document.getElementById(objSelectId);

if(null!= objSelect&& typeof(objSelect)!="undefined"){

for(var i=0;i<objSelect.options.length;){

objSelect.options.remove(i);

}

6.获取select中的所有item，并且组装所有的值为一个字符串，值与值之间用逗号隔开

@param objSelectId目标select组件id

@return select中所有item的值，值与值之间用逗号隔开

function getAllItemValuesByString(objSelectId){

var selectItemsValuesStr="";

var objSelect= document.getElementById(objSelectId);

if(null!= objSelect&& typeof(objSelect)!="undefined"){

var length= objSelect.options.length

for(var i= 0; i< length; i= i+ 1){

if(0== i){

selectItemsValuesStr= objSelect.options[i].value;

} else{

selectItemsValuesStr= selectItemsValuesStr+","+ objSelect.options[i].value;

}

return selectItemsValuesStr;

}相信看了这些案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！