How to implement single selection and multiple selection using select tag in HTML-HTML Tutorial-php.cn

This time I will show you how to implement single selection and multi-selection using the select tag in HTML. What are the precautions for implementing single selection and multi-selection using the select tag in HTML? The following is a practical case. Let’s take a look. The select element creates a single-select or multiple-select menu. When the form is submitted, the browser submits the selected items, or collects multiple options separated by commas, combines them into a single parameter list, and includes the name when submitting the form data to the server

Attributes . 1. Basic usage:

Volvo Saab Opel Audi Copy after login Among them, the tag can be omitted and used in the page

全部 湖北电大网络学习中心 成都师范学院网络学习中心 武汉职业技术学院网络学习中心 Copy after login 2. Select Elements can also be multi-selected, see the following code:

//有multiple属性，则可以多选 高中 大学 博士 //下面没有multiple属性 , 只显示一条，不能多选 高中 大学 博士 //下面是设置了size属性的情况 , 如果size = 3 那么就显示三条数据，注意不能多选的。 小学 初中 高中 中专 大专 本科 研究生 博士 博士后 请选择 Copy after login 3. All common operations involved in the multi-select Select component:

1. Determine whether there is an Item with a specified value in the select option.

@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 Copy after login

2. Add an Item to the select option @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); } } } Copy after login 3.

Delete the selected item from the select option, supported Multiple selection and multiple deletion @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 Copy after login 4. Delete an Item according to the specified value from the select option

@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 Copy after login 5. Clear all options in the select option

@param objSelectId 将要进行清空的目标select组件id function clearSelect(objSelectId) { var objSelect = document.getElementById(objSelectId); if (null != objSelect && typeof(objSelect) != "undefined") { for(var i=0;i Copy after login

6. Get all the items in the select and assemble all the values into a string , separated by commas @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 Copy after login

7. Move all selected options in one select to another select @param fromObjSelectId 移动item的原select组件id @param toObjectSelectId 移动item将要进入的目标select组件id function moveAllSelectedToAnotherSelectObject(fromObjSelectId, toObjectSelectId) { var objSelect = document.getElementById(fromObjSelectId); var delNum = 0; if (null != objSelect && typeof(objSelect) != "undefined") { for(var i=0;i Copy after login

8. Move all selected options in one select to another select Zhongqu @param fromObjSelectId 移动item的原select组件id @param toObjectSelectId 移动item将要进入的目标select组件id function moveAllToAnotherSelectObject(fromObjSelectId, toObjectSelectId) { var objSelect = document.getElementById(fromObjSelectId); if (null != objSelect) { for(var i=0;i Copy after login I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!