标签: dropdown

我有以下导航:

当我点击菜单项时,我得到以下内容:

问题是当我点击菜单链接时.链接容器继承下拉菜单的宽度.无论如何我可以用纯css解决方案禁用它吗？

我正在使用bootstrap 3.4.

我的导航的想法是下拉菜单增加导航div的高度.通过将下拉菜单设置为position:relative.父菜单项继承它的宽度.我很困惑为什么会这样做.有办法防止这种情况吗？

提前致谢.如果您需要更多详细信息,请与我们联系.

这是一个jsFiddle.

这是当前的标记:

<ul class="nav navbar-nav navbar-right">
        <li class="first expanded dropdown menu-4929 active"><a href="/" title="" data-target="#" class="dropdown-toggle menu-4929 active" data-toggle="dropdown">About Us</a>
            <ul class="dropdown-menu dropdown-menu-left">
                <li class="first leaf menu-4936 active"><a href="/" title="" class="menu-4936 active">The Museum</a></li>
                <li class="leaf menu-4937 active"><a href="/" title="" class="menu-4937 active">The Design</a></li>
                <li class="leaf menu-4938 active"><a href="/" title="" class="menu-4938 active">Our Team</a></li>
                <li class="last leaf menu-4939 active"><a href="/" title="" class="menu-4939 active">Work Opportunities</a></li>
            </ul>
        </li>
        <li class="expanded dropdown menu-4930"><a href="/the-collection" title="" data-target="#" class="dropdown-toggle menu-4930" data-toggle="dropdown">Collection</a> …

我创建了一些DropDownLists,它们填充了数据库中的数据.下拉列表的第一行是ListItem:

<asp:DropDownList ID="ddlChange_Requestor" runat="server" AppendDataBoundItems="True"  CssClass="ddlChange_Requestor">
    <asp:ListItem>Change Requestor</asp:ListItem>

我还有一个GridView,它在Select按钮上有一个RowCommand事件.

当我按下SelectDropDownLists时,将获得所尊重的列/行所具有的任何值:

protected void gwActivity_RowCommand(object sender, GridViewCommandEventArgs e)
{
    {
        GridViewRow row = ((e.CommandSource as Control).NamingContainer as GridViewRow);
        txtActivity.Text = row.Cells[2].Text;
        ddlChange_Requestor.SelectedValue = row.Cells[10].Text;
    }
}

当GridView中的Change Request列/行具有值但不是"white-space"/"Empty"/"Null"时,这种方法有效.我真的不知道如何解决它？

我希望能够做到这样的事情:

ddlChange_Requestor.SelectedValue = isnullOrwhitespace(row.Cells[10].Text , "Change Requestor");

但是我只想在后台使用它,因为我想在GridView中有空行但在RowCommand上Select应该理解空ListItem值意味着值.

这可能吗？

我对Flutter下拉菜单有疑问。当我选择其中一项时，会引发错误：

引发了另一个异常：'package：flutter / src / material / dropdown.dart'：断言失败：481行pos 15：'value == null || items.where（（（DropdownMenuItem item）=> item.value == value）.length == 1'：不正确。

我正在搜索，人们告诉您，产生此错误是因为所选元素不属于原始列表，但是经过一些调试后，我看到了。我找不到此错误的根源，因此不胜感激。

这是我的代码

FeedCategory模型

import 'package:meta/meta.dart';

class FeedCategory {
  static final dbId = "id";
  static final dbName = "name";

  int id;
  String name;

  FeedCategory({this.id, @required this.name});

  FeedCategory.fromMap(Map<String, dynamic> map)
      : this(
    id: map[dbId],
    name: map[dbName],
  );

  Map<String, dynamic> toMap() {
    return {
      dbId: id,
      dbName: name,
    };
  }

  @override
  String toString() {
    return 'FeedCategory{id: $id, name: $name}';
  }
}

小部件

import 'package:app2date/repository/repository.dart'; …

我有一个使用wire:model的下拉菜单

<div class="form-group">
    <label>Menu</label>
    <select wire:model="chapter_id" class="form-control @error('chapter_id') is-invalid @enderror" placeholder="Menu">
        @foreach ($chapters as $chapter)
            <option value="{{ $chapter->id }}">{{ $chapter->name }}</option>
        @endforeach
    </select>
    @error('chapter_id')
        <div class="invalid-feedback">{{ $message }}</div>
    @enderror
</div>

如果我更改选项（成功分配 $chapter_id），它就会起作用。但是，如果我将其保留为默认值（不更改选项），或者它只有一个选项，则 $chapter_id 将不会分配 $chapter_id 未分配

你们能帮我解决这个问题吗？

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

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

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

但是,我只能选择一个可用项目,因此该数字必须为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]]">

在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"> …

所以我遵循了两种不同的方法来创建带有 Materialize CSS 的下拉菜单（使用他们的文档：https : //materializecss.com/navbar.html & https://materializecss.com/dropdown.html），但我不能要么去上班。我也在这里巡视并发现了类似的问题，但似乎没有一个能完全解决我的问题，所以这里是......

我正在尝试使用 Meteor & Materialize 为 web 应用程序制作移动菜单。这是我的一些代码：

<ul id="dropdown" class="dropdown-content">
    <li><a href="#">EMPOWER YOUR BUSINESS!</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
</ul>
<ul class="hide-on-med-and-up">
    <li><a class="dropdown-trigger" data-target="dropdown">
        <i class="material-icons">menu</i></a>
    </li>
</ul>
<script>
    $(document).ready(function(){
        $('.modal').modal();
        $('.dropdown-trigger').dropdown();
    });
</script>

我已经包含<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">在 head 中，上面代码中的 jQuery 调用就在结束 body 标记之前。

任何帮助将非常感激。

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

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: () {
              .....
            },
          ),
        ],
      );
    });

}

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

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

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

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

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

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

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

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

https://jsfiddle.net/bLa8pn74/

我试图插入这个：

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

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

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

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

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

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

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