Html中给select的option选项中添加上下标

最新推荐文章于 2022-03-17 11:20:33 发布
最新推荐文章于 2022-03-17 11:20:33 发布
阅读量1.9k 收藏
点赞数
分类专栏： html 文章标签： html select sub
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kangming310/article/details/37502911
版权
最近遇到一个问题，在select的option中想显示NO2、SO2等选项，同时必修将其中的2作为下标显示，期初直接在option中添加<sub></sub>标签，结果发现不行，页面根本就不解析sub标签，原来option中只能显示文本，不能添加标签。后来就想着将sub标签转为字符串添加进去看行不行，结果还真可以了，例如NO2可以用下列方式表示：

  <option value="NO2">NO&lt;sub&gt;2&lt;/sub&gt;</option> 
 


                

        

        

    




    

      

        

            

              
                
                  吊儿郎当IT男
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  1
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
在option下拉菜单选项中添加图片

				
			

			

				

					
				

				

					08-08
					
					2586
					
				

			

		

		

			
				
option下拉菜单选项中添加图片（原创）作者 neweroica2002-11-21 14:33//*****************************************************************////                   作者 neweroica//                  2002-11-21 14:33//           

			
		

	



                

              
                



	

		

			

				
					
el-select 绑定对象obj + 传入参数(如：index下标等）

				
			

			

				

					Shimeng_1989的博客
				

				

					09-23
					
					2029
					
				

			

		

		

			
				
el-select 绑定对象obj + 传入参数(如：index下标等）

			
		

	



                


  
              

                


	

		

			

				
					
为Html的select option元素添加图案

				
			

			

				

					在Android的路上前行
				

				

					02-21
					
					1万+
					
				

			

		

		

			
				
在Html中，select的some text标签中是不能加任何子标签的，比如span、img等等，那么是不是就只能是纯文字呢？
经过一段时间的研究，其实还是可以用font-awesome、glyphicons等等的图标来美化一下我们的option的，方法如下：
1）在css中定义一个font-face
@font-face {
    font-family: glyphicons;

			
		

	





	

		

			

				
					
select选择框：获取所选择option的下标、值

				
			

			

				

					熬猪的夜的博客
				

				

					03-17
					
					1553
					
				

			

		

		

			
				
<select id="theGrade" onchange='go_banid()'>
 	 <option value="1">一</option> 
 	 <option value="2">二</option> 
 	 <option value="3">三</option> 
 </select>
 <script>
 function go_nianid() {
        var .

			
		

	



		

			
		



	

		

			

				
					
HTML 下拉框 select option 详解

				
			

			

				

					3月3的风筝
				

				

					02-20
					
					5万+
					
				

			

		

		

			
				
一、基础理解:

   var e = document.getElementById("selectId");

   e. options= new Option("文本","值") ;

   //创建一个option对象,即在标签中创建一个或多个文本

   //options是个数组,里面可以存放多个文本这样的标签

1:options[ ]数组的属性:

			
		

	





	

		

			

				
					
(Vue) Html中select拿不到option的值

				
			

			

				

					Linxuan
				

				

					11-09
					
					1567
					
				

			

		

		

			
				
 问题描述：

在edit.html中，获取list.html传来的id，用id查询信息然后显示到edit.html的各个对应的位置中

下拉框选择一个数据，再点保存，提示 “xx不能为空”、

下拉框选择一个数据，显示正确，但是换到其他input中，只要输入，下拉框就变回原来的值

 Html 代码：


&lt;select style="width:100%" v-model="cmdMat...

			
		

	





	

		

			

				
					
封装html的select标签的js操作实例

				
			

			

				

					10-27
				

			

		

		

			
				
`AddOneItem(id, text, value)`函数用于向`<select>`中添加一个新的选项。它接收ID、文本和值作为参数，然后创建一个新的`Option`对象，并将其添加到`<select>`的`options`集合中。  `selectOneOption(id, select...

			
		

	





	

		

			

				
					
Html5中文手册(程序员必备手册)

				
			

			

				

					03-29
				

			

		

		

			
				
61、<option> 定义下拉列表中的选项。 62、<output> 定义输出的一些类型。 63、<p> 定义段落。 64、<param> 为对象定义参数。 65、<pre> 定义预格式化文本。 66、<progress> 定义任何类型的任务的进度。 67、<q> ...

			
		

	





	

		

			

				
					
js 获取当前select元素值的代码

				
			

			

				

					10-29
				

			

		

		

			
				
获取`<select>`元素中当前选中的选项值是一项常见的任务，这通常涉及到对DOM（Document Object Model）的操作。本文将详细讲解如何使用JavaScript获取`<select>`元素的值以及其相关的属性和方法。  首先，`<select>`...

			
		

	





	

		

			

				
					
HTML属性.docx

				
			

			

				

					12-09
				

			

		

		

			
				
 - `option`：定义下拉列表中的选项，`selected`表示预选中，`value`定义选项值。  理解并熟练运用这些HTML属性是创建有效且功能丰富的网页的基础。在实际开发中，还会涉及到CSS来控制样式和JavaScript来实现动态...

			
		

	





	

		

			

				
					
html标记大全.zip

				
			

			

				

					08-27
				

			

		

		

			
				
9. **表单标签**：`<form>`创建表单，`<input>`输入框，`<textarea>`多行文本输入，`<select>`下拉菜单，`<option>`选项，`<button>`按钮，`<label>`标签关联，`<fieldset>`和`<legend>`组织表单元素。  10. **...

			
		

	





	

		

			

				
					
获取select选中option的位置下标

				
			

			

				

					qq_30908729的博客
				

				

					08-21
					
					6846
					
				

			

		

		

			
				
如何获取select选中option的位置下标？

解决方法：

就一句话轻松搞定，下面的$("#id").get(0)代表select标签dom对象。

http://www.yayihouse.com/yayishuwu/chapter/1516

			
		

	





	

		

			

				
					
js 获取select标签的值和下标

				
			

			

				

					THE DOOR IS CHANGING
				

				

					08-21
					
					5203
					
				

			

		

		

			
				
var typeIndex = document.getElementById("type").selectedIndex;//获得是第几个被选中了
var typeText = document.getElementById("type").options[typeIndex].text //获得被选中的项目的文本

			
		

	





	

		

			

				
					
美化select图标，自定义select右侧下图标

				
			

			

				

					Sunshine晶滴博客
				

				

					01-23
					
					8477
					
				

			

		

		

			
				
美化select图标

			
		

	





	

		

			

				
					
自己修改select的样式（修改select右边的小三角）

					
热门推荐

				
			

			

				

					java_zhaoyanli的专栏
				

				

					09-15
					
					6万+
					
				

			

		

		

			
				
CSS就可以解决，原理是将浏览器默认的下拉框样式清除，然后应用上自己的，再附一张向右对齐小箭头的图片即可。
select {
  /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
  border: solid 1px #000;

  /*很关键：将默认的select选择框样式清除*/
  appearance:none;
  -moz-appearance:none;

			
		

	





	

		

			

				
					
HTML中少用但非常实用的标签(sub,sup,small,legend,progress,details,summary,fieldset)

				
			

			

				

					weixin_47596965的博客
				

				

					07-09
					
					966
					
				

			

		

		

			
				
1、sub和sup标签
作用:
<sub> 标签可定义下标文本。<sup> 可定义上标文本。都属于行内元素，默认比当前字体稍小

2、<optgrounp>标签
作用:
作用看图一目了然，当我们需要将select中的option相关选项组合在一起中时，可以使用<optgroup>
Tip:需要搭配select使用

3、<small>标签让
作用：
标签内字体呈小一号的字体展示

4、<fieldset>标签
作用:
为<fiel

			
		

	





	

		

			

				
					
HTML标签：上标、下标

				
			

			

				

					Web前端开发
				

				

					07-03
					
					3万+
					
				

			

		

		

			
				
在博客日志中编辑文本的时候，尤其编辑化学习题或试卷时，要为某些字符设置上标或者下标，比如H2O是水的分子式，2O2-是两个氧离子。对于下标，常用的方法是：首先选中这些字符，再修改“字体”大小，然后单击“确定”按钮；对于上标，常束手无策。下面的博客日志HTML标签代码就可以修改，使其美观，方便阅读。
 HTML标签：上标
 在HTML语言中，  标签可定义上标文本。例如：要求显示：2个氧离子，在

			
		

	





	

		

			

				
					
获取select下的option的下标

				
			

			

				

					天元白手的博客
				

				

					03-03
					
					3023
					
				

			

		

		

			
				
<select name="selectType" id="selectIndex">
                <option>选择所属分类</option>
                <option>计算机/软件</option>
                <option>小说/文摘</option...

			
		

	





	

		

			

				
					
js  select 动态添加option

					
最新发布

				
			

			

				

					06-28
				

			

		

		

			
				
### 回答1：
这个问题是关于JavaScript中添加表单下拉框选项（option）的。

在JavaScript中，可以通过以下代码动态地向表单下拉框添加选项：

```
var select = document.getElementById("mySelect"); // 获取下拉框元素
var option = document.createElement("option"); // 创建一个<option>元素
option.text = "选项文本"; // 设置选项文本
option.value = "选项值"; // 设置选项值（可选）
select.add(option); // 把选项添加到下拉框中
```

其中，`mySelect`是要添加选项的下拉框元素的ID，可以根据实际情况修改。

希望对您有所帮助！   

### 回答2：
在JavaScript中，我们可以通过select元素的options属性来访问它的选项。此属性返回表示选项列表的HTMLCollection对象。我们可以使用appendChild()方法将动态创建的新option元素添加到选项列表末尾或insertBefore()方法将其插入到选项列表中的指定位置。但要注意的是，我们必须先创建一个新的option元素，再把它添加到select元素的options集合中。下面是一些示例代码：

1. 在select元素末尾添加新的option

```javascript
var select = document.getElementById("mySelect");
var option = document.createElement("option");
option.text = "新的选项";
select.options.add(option);
```

2. 在select元素中指定位置添加新的option

```javascript
var select = document.getElementById("mySelect");
var option = document.createElement("option");
option.text = "新的选项";
// 将新的option插入到select元素的第二个位置
select.options.add(option, 1);
```

除了使用appendChild()方法和insertBefore()方法添加新的option元素外，我们还可以设置新option元素的属性，如value、selected和disabled等。请注意，有些浏览器可能无法正确处理动态创建的select选项，在这种情况下，我们可以使用innerHTML属性更改整个选项列表的HTML代码。但是，这种方法可能会破坏与选项列表相关联的JavaScript代码，因此请谨慎使用。   

### 回答3：
JavaScript 的 select 元素提供了一种很方便的方式来创建下拉菜单。通常情况下，select 里面的 option 对象是通过静态的方式创建的，即在 HTML 中手工编写。

但是，在某些情况下，我们需要通过 JavaScript 动态地添加 option 对象来实现更加复杂的操作。这时可以通过代码中的 add 方法来实现。

添加 select option 方法：

首先，我们需要调用 select 元素的 options 属性，获取 select 对象的 option 集合。options 属性是一个数组，包含了当前 select 元素中所有 option 对象，可以通过数组下标的方式访问每个 option 对象。

其次，我们需要创建一个 option 对象，并设置 option 对象的 value 和 text 属性。value 属性表示该 option 对象的值，text 属性表示该 option 对象在下拉菜单中的显示文本。

最后，我们将创建的 option 对象添加到 select 元素的 options 集合中，即可完成动态添加 option 对象的操作。

代码如下：

```
<script type="text/javascript">
    //获取 select 对象
    var selectObj = document.getElementById("selectId");
    
    //创建一个 option 对象
    var optionObj = document.createElement("option");
    
    //设置 option 对象的 value 和 text 属性
    optionObj.value = "value1";
    optionObj.text = "Option 1";
    
    //将 option 对象添加到 select 对象的 options 集合中
    selectObj.options.add(optionObj);
</script>
```

这样，我们就可以通过 JavaScript 动态地添加 select 的 option 对象了。在实际的应用场景中，我们可以根据具体的需求，修改代码逻辑，实现更加丰富的操作。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值