如何以编程方式打开选择

Posted 2023-03-11

【中文标题】如何以编程方式打开选择

【英文标题】：How to open select programmatically

【发布时间】：2014-06-29 19:40:43

【问题描述】：

有谁知道是否可以在 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);

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

有可能吗？

【问题讨论】：

***.com/questions/249192/…

谢谢，我试过了，但它在 angularjs 中不起作用。我更新了我的问题

对不起，我的错误。这是导致问题的超时。谢谢

相当不错，有没有办法在 IE 中做到这一点？它目前在 IE 中对我不起作用

【参考方案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>

【参考方案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

【参考方案3】：

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

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

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

Select span arrow

【参考方案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

【讨论】：

在 Firefox 上对我不起作用，仅在 Chrome 上。有什么问题？

亲爱的 Karel，我在 Firefox 上测试它，它可以工作。可能是javascript错误？

【参考方案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');

【讨论】：

您的答案也不起作用（即未打开选择菜单）。在 Chrome 65 中测试

【参考方案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

【讨论】：

复制别人的天才解决方案是不光彩的，把它当作你自己的，而不给他们任何功劳。

这完全是一种耻辱。