标签: dropdown

如何在Polymer中重置纸张下拉菜单以便不选择任何内容？

我想将一个Polymer paper-dropdown-menu重置为它在JavaScript中的初始状态,因此没有选择任何内容,所以它看起来像这样:

我可以在纸张下拉菜单中的纸张菜单标签中添加一个ID,然后在JavaScript中访问它并选择它所选择的索引:

document.getElementById("accountTypeMenu").selected = 1;

Run Code Online (Sandbox Code Playgroud)

但是,我只能选择一个可用项目,因此该数字必须为0或更大.我无法将其设置为-1以选择任何内容以在视觉上将其返回到其初始状态,但我可以将所选状态记录到我刚设置的状态.我试图更改为选中的其他值为null和undefined.

这是我用于纸张下拉菜单的html:

<paper-dropdown-menu 
id="accountTypeDropdown"
selected-item="{{selectedItem}}"
selected-item-label="{{selected}}"
label='&#65290;Account type' 
style="width:50%;"
noink 
no-animations>

    <paper-menu id="accountTypeMenu"
                class="dropdown-content"
                onmouseup="requiredMenuFieldSelected('accountType')">
                        <template is="dom-repeat"
                                  items="{{accountTypes}}"
                                  as="accountType">
                            <paper-item value="[[accountType.id]]">[[accountType.name]]</paper-item>
                        </template>
    </paper-menu>

</paper-dropdown-menu>

<input is="iron-input" 
       name="accountType" 
       type="hidden" 
       value$="[[selectedItem.value]]">

Run Code Online (Sandbox Code Playgroud)

menu reset selected polymer-1.0 dropdown

Che*_*kie

lucky-day

7
推荐指数

1
解决办法

4410
查看次数

在bootstrap中,如何将图像作为下拉列表？

嗨,我已经在bootstrap中创建了一个下拉列表,我想放置一个图像,使其成为要点击的项目,以便查看下拉列表.

这是我的代码如下.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Getting Started with Bootstrap</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">

    <div class="container-fluid">
      <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-limanAbba-navbar-collapse-1" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>

  </button>
      <a class="navbar-brand" href="#">LimanAbba</a>
      </div>

      <div class="collapse navbar-collapse" id="bs-limanAbba-navbar-collapse-1">  

      <div class="navbar-header navbar-right">
        <ul class="nav navbar-nav">
           <li><a href="#">Freelance</a></li>
           <li><a href="#">About</a></li>
           <li><a href="#">Contact</a></li>\
           <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> …

Run Code Online (Sandbox Code Playgroud)

image twitter-bootstrap dropdown

Cod*_*deL

lucky-day

7
推荐指数

2
解决办法

3万
查看次数

在bootstrap下拉列表中下拉切换类的目的是什么？

无论是否将dropdown-togglebootstrap类应用于<button>元素,下拉菜单都可以正常工作,那么为什么要首先使用它呢？

html menu dropdown

MrS*_*ana

lucky-day

7
推荐指数

1
解决办法

8985
查看次数

Angular 4 Reset按钮重置DropDown默认值

我有一个看起来像这样的表单:

<form class="row" name="powerPlantSearchForm" (ngSubmit)="f.valid && searchPowerPlants()" #f="ngForm" novalidate>
          <div class="form-group col-xs-3" >
            <label for="powerPlantName">PowerPlant Name</label>
            <input type="text" class="form-control-small" [ngClass]="{ 'has-error': f.submitted && !powerPlantName.valid }" name="powerPlantName" [(ngModel)]="model.powerPlantName" #powerPlantName="ngModel" />
          </div>
          <div class="form-group col-xs-3" >
            <label for="powerPlantType">PowerPlant Type</label>
            <select class="form-control" [(ngModel)]="model.powerPlantType" name="powerPlantType">
              <option value="" disabled>--Select Type--</option>
              <option [ngValue]="powerPlantType" *ngFor="let powerPlantType of powerPlantTypes">
                {{ powerPlantType }}
              </option>
            </select>
          </div>
          <div class="form-group col-xs-3" >
            <label for="organizationName">Organization Name</label>
            <input type="text" class="form-control-small" name="powerPlantOrganization" [(ngModel)]="model.powerPlantOrg" #organizationName="ngModel" />
          </div>
          <div class="form-group col-xs-3" >
            <label for="powerPlantStatus">PowerPlant Active Status</label> …

Run Code Online (Sandbox Code Playgroud)

html javascript typescript dropdown angular

spa*_*rkr

2019 07-19

7
推荐指数

2
解决办法

1万
查看次数

Flutter：下拉列表中的选定值

当我选择一个项目时，对话框中的初始值不会改变。这是下拉列表的代码：

void _buildStatusDialog(String documentID) {
String _selectedText = "SDD";
showDialog<void>(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text("Status Update"),
        content: new DropdownButton<String>(
          hint: Text("Status"),
          value: _selectedText,
          items: <String>['SDD', 'Meeting', 'Home', 'Space']
              .map((String value) {
            return new DropdownMenuItem<String>(
              value: value,
              child: new Text(value),
            );
          }).toList(),
          onChanged: (String val) {
            _selectedText = val;
            setState(() {
              _selectedText = val;
            });
          },
        ),
        actions: <Widget>[
          FlatButton(
            child: Text("UPDATE"),
            onPressed: () {
              .....
            },
          ),
        ],
      );
    });

Run Code Online (Sandbox Code Playgroud)

}

如何更新“提示”或显示所选项目？

dart dropdown flutter

nyp*_*ogi

lucky-day

7
推荐指数

1
解决办法

2万
查看次数

提供占位符以在Angular 6中选择

我有一个选择选项，其中我要给占位符说“选择类别”

<form role="form" class="form form-horizontal" (ngSubmit)="onSubmit()" #form="ngForm" ngNativeValidate>
        <div class="form-group row">
            <div class="col-xl-4 col-lg-6 col-md-12">
                <fieldset class="form-group">
                    <label for="customSelect">Categories:</label>
                    <select class="custom-select d-block w-100" id="Category" [(ngModel)]="Category" name="Category" required>
                        <option value=" ">Select one category </option>                                     
                         <option *ngFor="let item of myBusinessList" [value]="item.id">{{item.name}}</option>
                    </select>
                </fieldset>                                
            </div>
        </div>
        <button type="submit" class="btn btn-raised btn-danger">Save</button>
    </form>

Run Code Online (Sandbox Code Playgroud)

如果我删除[ngModel]，则可以正常工作。如果我写

<option value="undefined" selected>Select one category </option>

Run Code Online (Sandbox Code Playgroud)

然后将其视为价值之一。我必须确保有地方，并且还需要选择值之一

select dropdown angular

Ruc*_*era

lucky-day

7
推荐指数

3
解决办法

1万
查看次数

使用jquery / javascript将带有下拉列表的html表导出到CSV文件

如标题中所述，我有一个HTML表，该表只有几列，用户必须从下拉列表中选择值。我想要做的就是能够将此表导出到CSV文件。我在网上找到了一个jquery插件，但是下拉列表有问题。它为每一行返回所有选项，而不是所选择的所有选项。我尝试解决此问题，但失败了。

jQuery插件和示例表位于jsfiddle中：

https://jsfiddle.net/bLa8pn74/

我试图插入这个：

if($(this).find('select').each(function(){
                    line.push(_quote_text($(this).find("option:selected").text()));
                }));

Run Code Online (Sandbox Code Playgroud)

但是它只打印头行。我现在应该是简单的改变，但是我无法弄清楚。

编辑：我想我的解决方案是不创建新表。

编辑2：我也尝试此代码：

if($(this).find('select')){
    line.push(_quote_text($(this).find('option:selected').text()));
            }
    line.push(_quote_text(_trim_text($(this).text())));

Run Code Online (Sandbox Code Playgroud)

它为我提供了选定的选项，但之后还提供了所有下拉选项以及多余的“”，“”，从而在其中找到一个空单元格。

如果我在第二个“ line.push”之前添加“ else”，则它仅返回所选值，其他所有内容均为空。

html javascript jquery dropdown

Ami*_*vić

2019 10-09

7
推荐指数

1
解决办法

267
查看次数

如何在 React 中将 JSON 响应呈现为下拉列表

我目前正在尝试获取一些我从 API 收到的 JSON 数据，并将其放入一个非常简单的 React 应用程序的下拉列表中。

到目前为止，这是我的 DropDown 组件：

import React from 'react';

var values;

fetch('http://localhost:8080/values')
    .then(function(res) {
        return res.json();
    }).then(function(json) {
        values = json;
        console.log(values);
    });

class DropDown extends React.Component {
    render(){
        return <div className="drop-down">
            <p>I would like to render a dropdown here from the values object</p>
            </div>;
    }
}

export default DropDown;

Run Code Online (Sandbox Code Playgroud)

任何我的 JSON 看起来像这样：

{  
   "values":[  
      {  
         "id":0,
         "name":"Jeff"
      },
      {  
         "id":1,
         "name":"Joe"
      },
      {  
         "id":2,
         "name":"John"
      },
      {  
         "id":3,
         "name":"Billy"
      },
      {  
         "id":4,
         "name":"Horace"
      }, …

Run Code Online (Sandbox Code Playgroud)

json reactjs dropdown

Hom*_*ata

lucky-day

6
推荐指数

2
解决办法

1万
查看次数

反应本机搜索下拉菜单

我正在研究 React 本机应用程序。我正在寻找一个可搜索的下拉菜单，我需要在很多地方实现它。

下面请看下面的视频以供参考：

示例视频

我已经在第三方下面实现了，但它们与我需要的不一样：

react-native dropdown

Anj*_*ana

lucky-day

6
推荐指数

1
解决办法

2万
查看次数

Flutter：如何为 DropdownItems 和 DropdownButton 所选项目设置不同的颜色？

我已经包含DropdownButton在我的项目中，但我遇到了这些问题。

我曾尝试在其上使用 Theme，但它也改变了两种颜色。我仍然可以更改下拉菜单的背景颜色，但我希望它是白色和黑色文本。

在这里你可以看到屏幕，下拉是白色的，因为文字颜色也是白色的

AccentColorOverride(
  child: Theme(
    data: ThemeData(
        hintColor: Colors.white,
        selectedRowColor: Colors.white),
    child: DropdownButton<String>(
      value: selectedRegion,
      hint: Text(hint_label_region, style: white18),
      isExpanded: true,
      underline: Container(
        height: 1.0,
        decoration: const BoxDecoration(
            border: Border(
                bottom: BorderSide(
                    color: Color(0xFFBDBDBD),
                    width: 2))),
      ),
      items: <String>[
        'A',
        'B',
        'C',
        'D'
      ].map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: new Text(
            value,
            style: TextStyle(color: Colors.white),
          ),
        );
      }).toList(),
      onChanged: (String newValue) {
        setState(() {
          selectedRegion = newValue;
        });
      },
    ),
  ),
)

Run Code Online (Sandbox Code Playgroud)

drop-down-menu dropdown flutter

1en*_*ore

lucky-day

6
推荐指数

1
解决办法

1662
查看次数