如何以编程方式打开选择

Question

有谁知道是否可以在 angularjs 中以编程方式打开选择。我试过了

angular.element(el).trigger('focus');
angular.element(el).trigger('click');
angular.element(el).trigger('mousedown');

没有任何作用。

我也试过

$scope.doSomething = function(){
    setTimeout(function() {
        var el = document.getElementById('test');
        var e = document.createEvent("MouseEvents");
        e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        worked = el.dispatchEvent(e);
    }, 0);

}

以上设置焦点但不打开选择。

有可能吗？

Answer 1

试试这个悬停：

JS：

$(document).ready(function(){
$("#selectId").hover(function(){
   $(this)[0].size=$(this).find("option").length;
});
$("#selectId").click(function(){
   $(this)[0].size=0;
});
});

HTML：

<select id="selectId">
  <option>Volvo</option>
  <option >Saab</option>
  <option>Mercedes</option>
  <option>Audi</option>
</select>

Answer 2

您可以通过设置选择的大小并使用 position:absolute 使其浮动来实现这一点。

<div  style="position:relative">.<select style="position:absolute;top:-8px;left:-20px" onClick="onAssign(this)">   
    <option>a</option>
    <option>b</option>
    <option>c</option>
</select></div>

function openMySelect(){
  document.querySelector(‘#mySelect’),size=YOUR_OPTIONS.length;
}

function onAssign(data,select){
  select.size=1
  // your logic
}

Answer 3

我想我找到了解决方案，至少对我有用：

首先尝试获取ng-select的箭头，然后强制mousedown事件

let arrowSpan = document.querySelector('.ng-arrow-wrapper');
arrowSpan.dispatchEvent(new CustomEvent('mousedown', { bubbles: true }))

Select span arrow

Answer 4

试试这个

function openSelect(selectId) {
    var event = new MouseEvent('mousedown', {
        'view': window,
        'bubbles': true,
        'cancelable': true
    });
    var cb = document.getElementById(selectId);
    cb.size=4;
    cb.dispatchEvent(event);
}
openSelect("testId");

或在此处阅读更多信息Triggering built-in events

Answer 5

haste提供的答案无效：

var cb = element[0].getElementsByClassName('some-selector')[0];
var event = new MouseEvent('mousedown', {
    'view': window,
    'bubbles': true,
    'cancelable': true
});                        
cb.dispatchEvent(event);

我用更简单的方法：

var cb = element[0].getElementsByClassName('some-selector')[0];
angular.element(cb).triggerHandler('click');

Answer 6

我遇到了同样的问题，最后我创建了自己的指令：

angular.module('openselect', [])
    .directive('openselect', function () {
        var showDropdown = function (element) {
            var event;
            event = document.createEvent('MouseEvents');
            event.initMouseEvent('mousedown', true, true, window);
            element.dispatchEvent(event);
        };
        return {
            restrict: 'A',
            scope: {
                'elemento': '@'
            },
            link: function (scope, elem, attrs, ctrl) {
                elem.bind('click', function () {
                    var elemento = document.getElementById(scope.elemento);
                    showDropdown(elemento);
                });
            }
        };
    });

使用方法：

<div style="position:relative">
<span ng-show="submittedForm.contry.$error.required && co_form.contry.$error.required" class="label label-danger">Indicanos tu país</span>
<select name="country" class="form-control input-md" ng-model="formCheckout.country" id="myCountry" placeholder="España" required>
    <option value="6" selected="selected">España</option>
    <option value="1">Alemania</option>
    <option value="15">Portugal</option>
</select>
<span class="glyphicon glyphicon-chevron-down" style="position: absolute; right: 10px; color: #A6A6A6; top: 18px;" openselect elemento="myCountry"></span>

将指令添加到您要打开的 select (elemento) 的任何传递 id 的标签。

如果你想在其他上下文中使用，你可以在指令中看到非常基本的 javscript 代码；

希望对你有帮助；D