Javascript 选择下拉菜单中的css中心默认值_Javascript_Jquery_Html_Css_Angularjs

Javascript 选择下拉菜单中的css中心默认值

javascript jquery html css angularjs

Javascript 选择下拉菜单中的css中心默认值,javascript,jquery,html,css,angularjs,Javascript,Jquery,Html,Css,Angularjs,我在angularjs中使用select和ng options来显示我自己构建的年份列表。我将当前年份作为默认值传递给select 这是最新版本。我的问题是: 如何将列表置于默认值的中心？我的劫掠并不完整，因为我的真实情况和这里的一样转到表单/表单向导/步骤3账单如您所见，通过选择一年，然后再次单击该年，菜单将以该年为中心但我的问题是，当我将默认年份值传递给它时，就像我已经选择了一样，然后单击列表上的“上一步”，我应该会看到它以该默认值为中心，但它不是。当我再次点击那一年，再次点击列

我在angularjs中使用

select

和

ng options

来显示我自己构建的年份列表。我将当前年份作为默认值传递给select

这是最新版本。

我的问题是: 如何将列表置于默认值的中心？我的劫掠并不完整，因为我的真实情况和这里的一样

转到表单/表单向导/步骤3账单

如您所见，通过选择一年，然后再次单击该年，菜单将以该年为中心

但我的问题是，当我将默认年份值传递给它时，就像我已经选择了一样，然后单击列表上的“上一步”，我应该会看到它以该默认值为中心，但它不是。当我再次点击那一年，再次点击列表，我看到它居中

换句话说，将一年作为默认值传递并不像我第一次通过单击来选择它那样起作用，因为当我再次单击时，它不会居中。我们如何解决这个问题

这是我正在使用的选择器的CSS文件：，它既不包含在plunker中，也不包含在代码片段中，因为我无法在plunker上正确复制该CSS，如果可以，请执行

var-app=angular.module（'app'，[]）；
应用程序控制器（'MyCtrl'，函数（$scope）{
$scope.dates={}；
$scope.years=[{value:'Year'，disabled:true}]；
var current_year=新日期（）.getFullYear（）；
对于（var i=当前\年份-20；i您可以将样式应用于选择框的id，如下所示
<!DOCTYPE html>
<html ng-app="app">

<head>
  <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
  <script src="script.js"></script>
</head>
<style>
#startYear{
  padding:0 1% 0 10%;
}
</style>
<body>
  <div ng-controller="MyCtrl">


      <label class="control-label">Year</label>
      <select name="startYear" ng-model="dates.startYear" id="startYear"
              ng-options="year.value as year.value disable when year.disabled for year in years"
              required>
          <option value="" disabled >Choose one</option>
      </select>

  </div>
</body>

</html>


#startYear{
填充：01%010%；
}
年
选一个

首先我要说的是，
标记不是一个标准标记，因为该标记的呈现部分是由操作系统完成的，而不是由浏览器完成的，因此它的行为与其他元素稍有不同，并且您无法真正将css应用于您需要的所有内容
话虽如此，但（几乎）总有一些黑客可以完成，我将把这个例子作为其中一个黑客来展示：

函数selectfocus（）{
el=事件目标；
sizeWhenOpen=5；
el.size=尺寸（单位：英寸）；
totalHeight=el.getBoundingClientRect（）.height；
heightPerOption=el.scrollHeight/el.options.length；
currentIndex=el.selectedIndex；
el.scrollTop=高度选项*（当前索引-数学楼层（尺寸为WhenOpen/2））；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
21
为什么不写一些CSS来定位span标记呢
span { text-align: center; }

或者更好……将其标记为id或类
.className { text-align: center; }
#idName { text-align: center; }

下面是一个功能性的plunker
关于Update 2 plunk链接，您只需要更新CSS。指定必须放置选择框的区域的宽度（任意）。这肯定会解决您的问题：）
问题是你在cliptheme.com上的例子根本没有滚动，它只是保持居中，因为div保持滚动位置
因此，要解决您的问题，您只需计算正确的位置并将其设置为.cs options
div。可以使用的一个事件是\u toggleSelect

工作示例（见第370-372行）：

这只是一个提示，您的最终解决方案应该更加复杂（比如不要在每次打开列表时查询元素）.我试过了，但它没有按预期工作，你能提供一个plunker的工作解决方案吗？你能告诉我你在上面的示例中遇到了什么问题吗？请看问题，它已经更新了，我添加了指令。现在我收到了你的问题，上次道歉。似乎下拉列表没有在代码中得到首字母。Pl在单击下拉列表之前，请先初始化下拉列表，如$（'selector'）。下拉列表（），我想它的引导控件应该可以工作。你能建议它应该在哪里以及如何工作吗？我在这里迷路了。下拉列表..是模板提供的一些角度自定义指令吗？？？我尝试使用包含css的TRPRODUCT，但当我从模板查看代码时，它添加了一些ul和span..大豆可能是模板的一个指令提供程序。@JesusCarrasco请查看问题，我添加了指令。对不起，pastebin不在我的网络上工作：（@jesusarrasco这里是更新的plunker，带有css和指令，就像它在网站上显示的一样，很好！它正在运行你的plunker。但是我无法在我的开发环境中复制它。你考虑到我共享的css文件了吗？还有指令吗？有东西在两者之间干扰。不知道是什么。如前所述-你可能不知道ed对css做了一些更改，使其工作完全相同。需要在select周围有一个相对位置的包装器，并在包装器内将select本身设置为绝对位置谢谢，但我无法完全实现您所说的。您能给出一些明确的解释吗？thanksi如前所述添加了包装器，但无法使其与我共享链接的css以及指令一起工作。以下是您提供的css示例：您可以建议一个基于此plunker的解决方案的plunker吗？看到它们实际上在跨距中…这是我制作的plunker，仅引用了跨距而不是option元素！但它是没有按预期工作。它应该将默认值居中。哈哈！我不是说将文本“2017”水平居中！我的意思是，当您单击下拉列表时，列表应该以该值为中心！而不是向下滚动以查找该值。如果您单击任何其他值，然后选择，比如2020，然后在下拉列表，您将看到该列表以2020为中心。但是，当第一次使用th单击该列表时，不会发生这种行为
.myctrl {
    position: absolute;
    vertical-align: top;
    margin-left: 50px;
    width: 200px;
}