ionic 使用ion-select组件获取value和text

最新推荐文章于 2022-11-18 15:21:43 发布
最新推荐文章于 2022-11-18 15:21:43 发布
阅读量7.6k 收藏
点赞数
分类专栏： ionic 文章标签： ionic ion-select value text  
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ducp123/article/details/80079685
版权
本文探讨在Ionic应用中如何有效地从ion-select组件中获取选中的value和text。通过数据双向绑定，作者发现`$event`事件默认只返回选中项的值，而非整个对象。通过修改绑定方式，将value设置为整个some对象，从而能获取到所有相关值，包括value、text等。此外，直接在getDealerName()函数中使用some对象也是可行的解决方案。
摘要由CSDN通过智能技术生成

如题：


                

        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  zoroDcup
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
ionic select控制器中无法获取到value

				
			

			

				

					Chengliangyao的博客
				

				

					04-19
					
					1917
					
				

			

		

		

			
				
ionic项目中，在页面视图中使用了select，但是在控制器中却没法直接获取到value，如下：

select ng-model="couponcode">
  option value="notuse">不使用option>
  option ng-repeat="item in couponcodes" value="{{item.entity_id}}">{{item.descrip

			
		

	



                

              
                



	

		

			

				
					
select框的text与value值的获取(实用版)

				
			

			

				

					weixin_34088598的博客
				

				

					05-10
					
					170
					
				

			

		

		

			
				
function def(){    var key = document.getElementById ('selectarea'); //select list    var value = document.getElementById ('DocAuthor'); //input text
 
　　//两种不同的取值
    value.value = key.options[key...

			
		

	



                


  
              

                


	

		

			

				
					
ionic中select下拉框点击无反应解决办法

				
			

			

				

					weixin_30790841的博客
				

				

					04-02
					
					252
					
				

			

		

		

			
				
两种解决办法：
1.在select外的div加入属性 data-tap-disabled=”true”


2.找到ionic.bundle.js文件 的下面这个函数，添加如图两行代码



转载于:https://www.cnblogs.com/xiao2013/p/6659327.html...

			
		

	





	

		

			

				
					
ionic3  ion-select

				
			

			

				

					qq_38316493的博客
				

				

					05-30
					
					3626
					
				

			

		

		

			
				
 //默认是alert弹窗  <ion-select >              </ion-select>  //下拉形式的  <ion-select  interface="popover">              </ion-select>

			
		

	



		

			
		



	

		

			

				
					
关于ionic 使用select焦点问题

				
			

			

				

					菜鸡奋斗ing的博客
				

				

					05-31
					
					1943
					
				

			

		

		

			
				
在做h5移动端应用时，使用的是ionic的ui框架。那么这篇文章的问题来了。使用Ionic框架会导致在android设备上选择select下拉框时焦点跑偏很难点中。 
后面原本是打算改用其他的下拉框，比如mobiscroll但是在后面网上查找时看到一篇相关的文章。 
http://www.cnblogs.com/xiao2013/p/6659327.html  
我个人测试后发现第一种加指令的方式比

			
		

	





	

		

			

				
					
用于Ionic应用的单选或多选框ion-select-autocomplete.zip

				
			

			

				

					07-19
				

			

		

		

			
				
ion-select-autocomplete是一个用于Ionic应用的单选或多选框。使用方法下载或者clone项目，并添加下面的代码[removed][removed]In JS$scope.optionList = [   {   label: 'India',   value: 'IND'   },   {...

			
		

	





	

		

			

				
					
ionic 设置默认值为空时，消除相差8个小时的时区，修改系统组件ion-datetime/设置定时器隐藏时间

				
			

			

				

					qq_33871182的博客
				

				

					06-10
					
					797
					
				

			

		

		

			
				
一、最终效果图
当前时间为2020-06-10 09:28:51
默认值为空

二、系统组件datetime.js源码
路径：node_modules\ionic-angular\components\datetime\datetime.js
增加参数pickerHH:true
/**
     * @hidden
     */
    DateTime.prototype.generate = function () {
        var _this = this;
        var pic

			
		

	





	

		

			

				
					
ion-select

					
最新发布

				
			

			

				

					08-03
				

			

		

		

			
				
ion-select是Ionic框架中的一个组件，用于创建下拉选择框。根据提供的引用内容，...综上所述，ion-select是Ionic框架中用于创建下拉选择框的组件，可以通过ion-option标签定义选项，并使用不同的方式来获取选择的值。

			
		

	





	

		

			

				
					
ionic中的常用组件(2)

				
			

			

				

					qq_44361433的博客
				

				

					04-20
					
					421
					
				

			

		

		

			
				
9,list
用来显示信息列表，如联系人列表、播放列表或菜单。
<!-- 普通list -->
  <ion-list >
    <ion-item>item1</ion-item>
    <ion-item>item2</ion-item>
    <ion-item>item3</ion-item&g...

			
		

	





	

		

			

				
					
一个可筛选的下拉选择ionic2组件ionic2filterselect

				
			

			

				

					08-12
				

			

		

		

			
				
一个可筛选的下拉选择ionic2组件(ionic2 filter select)

			
		

	





	

		

			

				
					
为ion-select添加图片

				
			

			

				

					03-09
				

			

		

		

			
				
1.ionic中的ion-select标签添加图片
2.ion-select有四种显示方式，四种添加图片的代码示列
3.通过这个实列，你会在ionic中灵活应用css样式；还会学到javaScript的一些知识（如：获取Dom节点、获取html元素、自定义html元素）
4.内附有详细的代码介绍以及各种注意细节，可供各位喜欢研究ionic的学者学习参考

			
		

	





	

		

			

				
					
Ionic4—UI组件值select组件

				
			

			

				

					雷雨天的雷胖子
				

				

					01-13
					
					740
					
				

			

		

		

			
				
目录

一、概述

二、自定义属性

三、事件

一、概述

select组件是一个表单控件，用于从一组选项中选择一个或多个选项，类似于html的select标签。

二、自定义属性


cancelText属性


取消按钮显示的文本，默认值Cancel。


disabled属性


如果属性值为true，则用户无法与之交互。


interface属性


选择使用哪种打开方式，有三个属性...

			
		

	





	

		

			

				
					
10、选择框：ion-select

				
			

			

				

					weixin_33716557的博客
				

				

					06-06
					
					333
					
				

			

		

		

			
				
！重点multiple="true" 控制 选择框是 多选还是单选。true为 多选类似 checkbox。

/* ---html----*/
 
<ion-content padding>
   
  <ion-list>
    <ion-item>
      <ion-label>单选</ion-label>
...

			
		

	





	

		

			

				
					
ion-item内 ion-select 左对齐

				
			

			

				

					chelen_jak的专栏
				

				

					07-31
					
					655
					
				

			

		

		

			
				
html



<ion-item>
    <ion-label fixed>姓名</ion-label>
    <ion-input type="text" placeholder="请输入姓名" formControlName="Name" text-left></ion-input>
</ion-item>
&lt...

			
		

	





	

		

			

				
					
获取select选中的value，text值

				
			

			

				

					weixin_43403934的博客
				

				

					11-18
					
					582
					
				

			

		

		

			
				
获取指定标签名的对象集合 var option = document.getElementsByTagName(“option”);获取select指定id的对象： var select = document.getElementById(“xghnr”);获取select中选中项的value值    var text = option[index].value;获取select中选中项的text值    var text = option[index].text;

			
		

	





	

		

			

				
					
ionic  下拉选择过滤筛选

				
			

			

				

					zhaoyue960607的博客
				

				

					03-18
					
					855
					
				

			

		

		

			
				
html

<div>

<ion-select  [(ngModel)]="TYPE_ID" (ngModelChange)="switchType()"  okText="确定" cancelText="取消" mode="ios">

<ion-select-option value="0">全部</ion-select-option&...

			
		

	





	

		

			

				
					
ionic3 ion-select 在不点击的情况下弹出

				
			

			

				

					每天一只喵的博客
				

				

					06-22
					
					2480
					
				

			

		

		

			
				
1.html页面（用户手动点击时触发组件）



 &lt;ion-item&gt;
    &lt;ion-label&gt;标题&lt;/ion-label&gt;
    &lt;ion-select [(ngModel)]="nowWork" cancelText="取消"  okText="确定"&gt;
      &lt;ion-option *ngFor=&qu

			
		

	





	

		

			

				
					
ionic2 ion-select 设置默认选项

				
			

			

				

					高银行的博客
				

				

					12-06
					
					7650
					
				

			

		

		

			
				
1) html 页面   
          
                 AAAAA
                 BBBBB
                 CCCCC
                 DDDDD
                 EEEEE
              
       2) 对应Typescript页面
           

			
		

	





	

		

			

				
					
掌握Ionic列表ion-list与高效ng-repeat技巧

				
			

			

				

					
				

			

		

		

			
				
在第十八讲中，主要探讨了Ionic框架中的核心组件——ion-list及其高效性能实现。ion-list是Ionic框架中用于展示有序或无序项目集合的主要容器，它允许开发者创建整洁、直观的用户界面。以下是对ion-list和其成员ion-...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 2

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值