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

最新推荐文章于 2022-09-23 20:32:12 发布
最新推荐文章于 2022-09-23 20:32:12 发布
阅读量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
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
CSS选择符

				
			

			

				

					Tansum
				

				

					12-19
					
					357
					
				

			

		

		

			
				
1.分组选择符

分组选择符以逗号作为分隔符。


h1,h2{color:blue;}

对h1，h2运用同样的规则

2.上下文选择符

上下文选择符，严格来讲（也就是CSS规范里），叫后代组合式选择符（descendant combinator selector），就是一组以空格分隔的标签名。用于选择作为指定祖先元素后代的标签。


article p{font-weight:bold;}
...

			
		

	



                

              
                



	

		

			

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

				
			

			

				

					
				

				

					08-08
					
					2587
					
				

			

		

		

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

			
		

	



                


  
              

                


	

		

			

				
					
获取select下的option的下标

				
			

			

				

					天元白手的博客
				

				

					03-03
					
					3028
					
				

			

		

		

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

			
		

	





	

		

			

				
					
select下拉列表提示title添加

				
			

			

				

					zhanglujie2008的专栏
				

				

					04-04
					
					1万+
					
				

			

		

		

			
				
在我们做项目的过程中可能有时候列表的宽度是一定的，这时候我们的列表内容可能不能从列表的窗口中完全看到，此时就需要给列表加一下title，当鼠标悬浮在select列表的上方时就能够看到所有的文本。这个功能需要2个过程：1、初始化被选项的title  2、onchange事件改变时切换title。
          下边给出这2个事件的函数：
          1、初始化title

			
		

	



		

			
		



	

		

			

				
					
为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;

			
		

	





	

		

			

				
					
封装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>`...

			
		

	





	

		

			

				
					
word通过内码生成上下标，解决HTML中上下标不显示

				
			

			

				

					05-27
				

			

		

		

			
				
解决在HTML中input或textarea中上下标不能正确输入问题，或在word中的上下标一复制到HTML的标签中就变成数字格式问题

			
		

	





	

		

			

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

				
			

			

				

					Shimeng_1989的博客
				

				

					09-23
					
					2046
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					熬猪的夜的博客
				

				

					03-17
					
					1556
					
				

			

		

		

			
				
<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[ ]数组的属性:

			
		

	





	

		

			

				
					
获取select选中option的位置下标

				
			

			

				

					qq_30908729的博客
				

				

					08-21
					
					6850
					
				

			

		

		

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

解决方法：

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

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

			
		

	





	

		

			

				
					
select下面option的选中下标selectedIndex

				
			

			

				

					weixin_34268610的博客
				

				

					04-25
					
					608
					
				

			

		

		

			
				
<img id='pic' src='http://oi5k7c9bd.bkt.clouddn.com/log_yuan.png'/>
<select id='sel' onchange="showImg()">
    <option value='http://oito4x28c.bkt.clouddn.com/mmexport1470584347994....

			
		

	





	

		

			

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

					
热门推荐

				
			

			

				

					java_zhaoyanli的专栏
				

				

					09-15
					
					6万+
					
				

			

		

		

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

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

			
		

	





	

		

			

				
					
html给select设置选中项

				
			

			

				

					hwz333的博客
				

				

					09-05
					
					3097
					
				

			

		

		

			
				
var pid = data.pbid;
if(pid == null){
pid = 0;
}
pid就是select的value值		            	
$("#pbName option[value=’"+pid+"’]").prop(“selected”, true);
如果是layui框架，还要加入一个渲染
form.render(‘select’);

				商品品牌
			...

			
		

	





	

		

			

				
					
js  select 动态添加option

					
最新发布

				
			

			

				

					06-28
				

			

		

		

			
				
回答1：</h3><br/>这个问题是关于JavaScript中添加表单下拉框选项（option）的。  在JavaScript中，可以通过以下代码动态地向表单下拉框添加选项：  ``` var select = document.getElementById("mySelect"); // 获取...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值