如何在ng-Options上设置关闭的下拉值

How to set the closed dropdown value on an ng-Options

本文关键字：设置 ng-Options      更新时间：2023-09-26

我使用angular来管理我的选择下拉列表，从一个数组。

  • 数组本身的条目都是小写的。
  • 要在代码的其他地方使用的"selected"变量应该是小写的。
  • 下拉菜单中显示的条目需要大写
  • 当下拉菜单关闭时它想要显示当前选择的条目(大写)与字符串"VIEWING: "前置。

我知道如何实现前3(通过使用myValue.toUpperCase() for myValue in myArrayOfValues)，但我甚至不知道如何去实现第四点-无论是在Angular(理想情况下)还是在原始JS/jQuery

有人知道怎么实现这个吗?

我认为你需要以下组合:

  • https://api.jquery.com/focusin/
  • https://api.jquery.com/change/
  • https://api.jquery.com/focusout/
HTML: 

<select name=dropdown size=1>
    <option value="option1">option 1</option>
    <option value="option2" selected>VIEWING: option 2</option>
</select>
Javascript: 

var dropdown = $('select[name="dropdown"]');
dropdown.focusin(function() {
    var selected = dropdown.find(":selected");
    selected.html(selected.val());
});
dropdown.change(function() {
    updateSelected();
    $(this).blur();
});
dropdown.focusout(function() {
    updateSelected();
});
function updateSelected() {
    var selected = dropdown.find(":selected");
    var html = "VIEWING: " + selected.val();
    selected.html(html);
}
https://jsfiddle.net/r89oy2zk/

相关文章：