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

最新推荐文章于 2023-07-06 15:36:47 发布
原创 最新推荐文章于 2023-07-06 15:36:47 发布 · 2.0k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html select sub

本文探讨了在HTML select元素的option标签中如何正确显示含有下标的选项值，如NO2、SO2等，通过将下标转换为字符串的方式解决页面不解析sub标签的问题。
最近遇到一个问题，在select的option中想显示NO2、SO2等选项，同时必修将其中的2作为下标显示，期初直接在option中添加<sub></sub>标签，结果发现不行，页面根本就不解析sub标签，原来option中只能显示文本，不能添加标签。后来就想着将sub标签转为字符串添加进去看行不行，结果还真可以了，例如NO2可以用下列方式表示：

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




                

        

    


  



    



                



	

		

			

				
					
JavaScript选项菜单（select-option）联动

				
			

			

				

					m0_51073424的博客
				

				

					05-16
					
					594
					
				

			

		

		

			
				
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>省市选

			
		

	



                

            
              



	

		

			

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

				
			

			

				

					10-27
				

			

		

		

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

			
		

	



              


  
  
              

                


	

		

			

				
					
获取select下的option的下标

				
			

			

				

					天元白手的博客
				

				

					03-03
					
					3186
					
				

			

		

		

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

			
		

	





	

		

			

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

			
		

	



		

			
		



	

		

			

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

				
			

			

				

					
				

				

					08-08
					
					2691
					
				

			

		

		

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

			
		

	





	

		

			

				
					
CSS选择符

				
			

			

				

					Tansum
				

				

					12-19
					
					433
					
				

			

		

		

			
				
1.分组选择符

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


h1,h2{color:blue;}

对h1，h2运用同样的规则

2.上下文选择符

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


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

			
		

	





	

		

			

				
					
JAVA或JS操作字符的上标以及下标并展示

				
			

			

				

					qq_42397932的博客
				

				

					11-14
					
					2862
					
				

			

		

		

			
				
字符的上标以及下标如何展示

			
		

	





	

		

			

				
					
JS & JQuery 动态添加 select option

				
			

			

				

					10-22
				

			

		

		

			
				
以上知识点总结了使用原生JavaScript和JQuery动态地向select元素中添加和删除option的方法。JavaScript的方式较为基础，需要直接操作DOM元素。而JQuery提供的方法则更为简洁和高效，利用其链式调用和丰富的API使得对...

			
		

	





	

		

			

				
					
jQuery获取select选中的option的value值实现方法

				
			

			

				

					10-21
				

			

		

		

			
				
标题中提到的知识点是使用jQuery库来获取HTML中select元素下当前选中option的value值。在Web前端开发中，select标签是一个常见的HTML表单元素，用于提供下拉列表供用户选择。每个option元素代表列表中的一个选项。而...

			
		

	





	

		

			

				
					
js  select 动态添加option

				
			

			

				

					06-28
				

			

		

		

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

			
		

	





	

		

			

				
					
select下拉列表提示title添加

				
			

			

				

					zhanglujie2008的专栏
				

				

					04-04
					
					1万+
					
				

			

		

		

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

			
		

	





	

		

			

				
					
两个select 左右添加，上下移动

				
			

			

				

					weixin_30256901的博客
				

				

					12-06
					
					96
					
				

			

		

		

			
				
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script&...

			
		

	





	

		

			

				
					
标签插入两一个html,HTML option标签怎么添加两个value？option标签的用法解析

				
			

			

				

					weixin_26798991的博客
				

				

					06-10
					
					523
					
				

			

		

		

			
				
本篇文章主要的讲述了关于HTML option标签的用法实例，怎么添加两个value的值，最后还有一个常见的问题解答，希望能帮到大家，好了，现在一起来看看这篇关于HTML option标签的文章吧首先先看看HTML option标签的意思：option 元素定义下拉列表中的一个选项(一个条目)。浏览器将  标签中的内容作为  标签的菜单或是滚动列表中的一个元素显示。option 元素位于 sele...

			
		

	





	

		

			

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

				
			

			

				

					Shimeng_1989的博客
				

				

					09-23
					
					2334
					
				

			

		

		

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

			
		

	





	

		

			

				
					
html option图片,在<select>中添加图片的最佳方式<option>

				
			

			

				

					weixin_29887351的博客
				

				

					06-04
					
					2813
					
				

			

		

		

			
				
$(".dropdown img.flag").addClass("flagvisibility");$(".dropdown dt a").click(function() {$(".dropdown dd ul").toggle();});$(".dropdown dd ul li a").click(function() {var text = $(this).html();$(".drop...

			
		

	





	

		

			

				
					
layui 实现往 select 标签里面添加 option

				
			

			

				

					Shelly Long的博客
				

				

					07-06
					
					2376
					
				

			

		

		

			
				
模块和jQuery库。请确保你已经引入了Layui和jQuery的相关文件。下面是一个基本的示例，展示如何使用Layui和jQuery来往。，你需要使用Layui的。要使用Layui来往。

			
		

	





	

		

			

				
					
Element-ui 给下拉框el-select 的 el-option里加上icon图标

				
			

			

				

					前端打工人的博客
				

				

					02-09
					
					9836
					
				

			

		

		

			
				
如上图，需要在下拉框中添加小图标，可以使用下面方法，固定的图标直接写死就行了，如果是根据类型显示不同图标，就需要添加判断动态显示了。我这里使用的是svg图标，方法同下
<el-select v-model="form.ceshi" clearable>
 <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> 
  <span style="fl.

			
		

	





	

		

			

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

				
			

			

				

					熬猪的夜的博客
				

				

					03-17
					
					1741
					
				

			

		

		

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

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

  

	
    

      

      

      

        
        

          
          

            

              成就一亿技术人!
            

            

              拼手气红包6.0元
            

          

        

        

          

            还能输入1000个字符
          

          

             
          

          

            

              红包
              添加红包
            

            

              表情包
              插入表情
              

                

              

            

            

              表情包
              代码片
              

                
              

            

            

              
              
              
              
              
              
              
            

          

        

      

    

		

			

			

			
			

					 条评论被折叠 查看
			

			

				
			

		

	

	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值