代码之家 › 专栏 › 技术社区 › yer

如何从按钮下拉列表中获取值并将其保存在localStorage中?角度4

dropdown local-storage angular

yer · 技术社区 · 6 年前

我有一个按钮下拉列表

<div class="form-group">
            <button type="button" class="btn btn-secondary dropdown-toggle form-group" (click)="get()" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            <span id="selected">View Domains</span>
            </button>
            <div class="dropdown-menu arrow form-group">
              <button class="dropdown-item" type="button" value="1">1</button>
              <button class="dropdown-item" type="button" value="2">2</button>
              <button class="dropdown-item" type="button" value="3">3</button>
            </div>
    </div>



 $('.dropdown-menu button').click(function(){
      $('#selected').text($(this).text());
    });

当他们选择任何选项(1,2,3)时,我想在组件中获得下拉列表的值,例如:如果他们选择1,我应该能够在组件中获得值=1,并将其保存到localStorage。

2 回复 | 直到 6 年前

Matt 6 年前

在ts文件中

myText = 'View Domains'

select(val){
    this.myText = val;
    localStorage.setItem('myText', this.myText);
}

在模板中

<div class="form-group">
    <button type="button" class="btn btn-secondary dropdown-toggle form-group" (click)="get()" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span id="selected">{{myText}}</span>
    </button>
    <div class="dropdown-menu arrow form-group">
        <button class="dropdown-item" type="button" value="1" (click)="select(1)">1</button>
        <button class="dropdown-item" type="button" value="2" (click)="select(2)">2</button>
        <button class="dropdown-item" type="button" value="3" (click)="select(3)">3</button>
    </div>
</div>

Basavaraj Bhusani 6 年前

使用 click 上的事件 <div class="dropdown-menu arrow form-group"> ,更新HTML,如下所示。

<div class="dropdown-menu arrow form-group" (click)="onSelect($event)">

然后在组件添加中 onSelect 方法如下。

onSelect(event) { localStorage.setItem("selectedItem", event.target.value); // Do the rest }

推荐文章

yer · 如何从按钮下拉列表中获取值并将其保存在localStorage中?角度4

6 年前

Willy_Sunny · Bootstrap4下拉菜单填充输入组

6 年前

Andriano Crs · 如何使用VBA从下拉列表中筛选列表

6 年前

wpdev · Jquery在引导下拉列表中禁用伪元素上的链接

6 年前

Jalicia Smalley · 如何为两个下拉列表创建if语句

6 年前

Hahnemann · 在Shiny中传递ui中的小部件值

6 年前

Pradnya Bhagat · 基于Ionic 3中的第一个下拉选择显示/隐藏第二个下拉选择

6 年前

user9433918 · 不应悬停的不可见元素

6 年前

evolmind · Angular 2:如何使用我的服务从json文件中填充下拉列表?

6 年前

RA19 · 单击引导下拉列表项,使用toggleClass Jquery更改按钮类

6 年前