Javascript 如何在离子中制作下拉或选择框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31369652/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to make dropdown or select box in ionic
提问by user944513
could you please tell me how to make drop down as show in image .I am using ionic framework from hereI am using dropdown
你能告诉我如何制作如图所示的下拉菜单。我正在使用这里的离子框架我正在使用下拉菜单
here is my code
这是我的代码
I want to make like that as show given image http://ionicframework.com/docs/components/#select
我想像这样显示给定的图像http://ionicframework.com/docs/components/#select
I want to make only drop down as shown in image (default text in left ) .I want to decrease the width of dropdown in document (as it is taking whole width).Secondly I don't want to display any text from of drop down
我只想制作如图所示的下拉菜单（左侧的默认文本）。我想减小文档中下拉菜单的宽度（因为它占用整个宽度）。其次，我不想显示下拉菜单中的任何文本下
here is my code
这是我的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>
<body ng-app="app">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Awesome App</h1>
</ion-header-bar>
<ion-content class="padding">
<div> View</div>
<div class="list">
<label class="item item-input item-select">
<div class="input-label">
Lightsaber
</div>
<select>
<option selected>Default</option>
<option >Green</option>
<option>Red</option>
</select>
</label>
</div>
</ion-content>
</ion-pane>
</body>
</html>
回答by user1234
You could do this by making the label blank and overriding the selectstyles with CSS.
您可以通过将标签设为空白并select使用 CSS覆盖样式来实现此目的。
Try something like this.
尝试一些像这样。
HTML:
HTML：
<label class="item item-input item-select">
<div class="input-label">
</div>
<select>
<option selected>Default</option>
<option >Green</option>
<option>Red</option>
</select>
</label>
CSS:
CSS：
.item-select {
width: 75%; /* Or whatever you'd like the width to be */
}
.item-select select {
left: 0;
}
回答by Rahul Chouhan
<div class="list">
<label class="item item-input item-select">
<div class="input-label">
Lightsaber
</div>
<select>
<option>Blue</option>
<option selected>Green</option>
<option>Red</option>
</select>
</label>
</div>
回答by Ashok Goli
This worked for me:
这对我有用：
Template:
模板：
<ion-item class="item-input item-select">
<div class="input-label">
Select Label
</div>
<select>
<option selected>Option 1</option>
<option>Option 2</option>
</select>
</ion-item>
CSS:
CSS：
.item-select select, .item-select select option{
left: 75%;
}
回答by Aley
.item-select {
height: 40px;
}
.item-select select {
max-width: 100%;
width: 100%;
}
<div class="list">
<label class="item item-input item-select">
<select>
<option selected>Default</option>
<option>Green</option>
<option>Red</option>
</select>
</label>
</div>
