Javascript如何选择Form IO下拉框

Question

问题

有个网页，使用了FormIO js做select下拉框，现在想用javascript代码来自动完成FormIO下拉框的选择，没有找到办法如何实现。下面是一个例子，

注明：不是自己在自己写的网页里操作，而是我想通过javascript代码，在别的网站上（例如百度网页），自动化一些指令，本来要用鼠标键盘做的事情，用JavaScript代码来代替。

如何在chrome控制台里，用代码来选择下拉框？比如，如何用JavaScript代码来选择

"Pear"?

实际的网页HTML元素是这样的：

<div class="ui-select-container ui-select-bootstrap dropdown ng-not-empty ng-valid ng-valid-required"
        ng-class="{open: $select.open}" ui-select-required="" ng-model="data[component.key]"
        ng-model-options="{allowInvalid: true}" safe-multiple-to-single="" auto-focus="true"
        aria-labelledby="ExternalObserverConfirmationLabel" aria-describedby="ExternalObserverConfirmationDesc"
        name="ExternalObserverConfirmation" ng-disabled="readOnly" ng-required="isRequired(component)"
        id="ExternalObserverConfirmation" theme="bootstrap" custom-validator="component.validate.custom"
        ng-style="getInputGroupStyles(component)">
        <div class="ui-select-match ng-scope" ng-hide="$select.open &amp;&amp; $select.searchEnabled"
            ng-disabled="$select.disabled" ng-class="{'btn-default-focus':$select.focus}" placeholder=""
            allow-clear="!component.validate.required"><span tabindex="-1"
                class="btn btn-default form-control ui-select-toggle" aria-label="Select box activate"
                ng-disabled="$select.disabled" ng-click="$select.activate()" style="outline: 0;"><span
                    ng-show="$select.isEmpty()" class="ui-select-placeholder text-muted ng-binding ng-hide"></span> <span
                    ng-hide="$select.isEmpty()" class="ui-select-match-text pull-left"
                    ng-class="{'ui-select-allow-clear': $select.allowClear &amp;&amp; !$select.isEmpty()}" ng-transclude="">
                    <formio-select-item template="component.template" item="$item || $select.selected" select="$select"
                        class="ng-scope ng-isolate-scope"><span class="ng-binding ng-scope">No</span></formio-select-item>
                    <!-- ngIf: !component.multiple && !component.validate.required --><span
                        ng-if="!component.multiple &amp;&amp; !component.validate.required"
                        class="close ui-select-match-close ng-scope" ng-hide="$select.disabled"
                        ng-click="clearSelected($event)" style="position:absolute;top:3px;right:1.2em;width:auto;">×</span>
                    <!-- end ngIf: !component.multiple && !component.validate.required -->
                </span> <i class="caret pull-right" ng-click="$select.toggle($event)"></i> <a
                    ng-show="$select.allowClear &amp;&amp; !$select.isEmpty() &amp;&amp; ($select.disabled !== true)"
                    aria-label="Select box clear" style="margin-right: 10px" ng-click="$select.clear($event)"
                    class="btn btn-xs btn-link pull-right ng-hide"><i class="glyphicon glyphicon-remove"
                        aria-hidden="true"></i></a></span></div><span
            ng-show="$select.open &amp;&amp; $select.refreshing &amp;&amp; $select.spinnerEnabled"
            class="ui-select-refreshing glyphicon glyphicon-refresh ui-select-spin ng-hide"></span> <input type="search"
            autocomplete="off" tabindex="-1" aria-expanded="true" aria-label="Select box" aria-owns="ui-select-choices-0"
            class="form-control ui-select-search ng-pristine ng-untouched ng-valid ng-empty ng-hide"
            ng-class="{ 'ui-select-search-hidden' : !$select.searchEnabled }" placeholder="" ng-model="$select.search"
            ng-show="$select.open" style="width: 10px;">
        <ul class="ui-select-choices ui-select-choices ui-select-choices-content ui-select-dropdown dropdown-menu ng-scope ng-hide"
            ng-show="$select.open &amp;&amp; $select.items.length > 0"
            repeat="getSelectItem(item) as item in selectItems | filter: $select.search"
            refresh="refreshItems($select.search)" refresh-delay="250">
            <li class="ui-select-choices-group" id="ui-select-choices-0">
                <div class="divider ng-hide" ng-show="$select.isGrouped &amp;&amp; $index > 0"></div>
                <div ng-show="$select.isGrouped" class="ui-select-choices-group-label dropdown-header ng-binding ng-hide"
                    ng-bind="$group.name"></div><!-- ngRepeat: item in $select.items -->
                <!-- ngIf: $select.open -->
                <!-- end ngRepeat: item in $select.items -->
                <!-- ngIf: $select.open -->
                <!-- end ngRepeat: item in $select.items -->
            </li>
        </ul>
        <div class="ui-select-no-choice"></div>
        <ui-select-single></ui-select-single><input ng-disabled="$select.disabled"
            class="ui-select-focusser ui-select-offscreen ng-scope" type="text" id="focusser-0"
            aria-label="Select box focus" aria-haspopup="true" role="button" tabindex="0">
    </div>
    <input type="text" formio-custom-attributes=""
        class="formio-select-autocomplete-input ng-pristine ng-untouched ng-valid ng-scope ng-empty"
        ng-model="autocompleteValue" ng-change="autocompleteValueChanged()" tabindex="-1">

这里是Form IO的官方文档，请参考？

https://formio.github.io/formio.js/app/examples/select.html。

如果有人了解，希望能远程协助我。

Answer 1

提供参考实例【javascript 自动完成下拉框】，期望对你编写程序有所帮助：https://blog.csdn.net/winderain/article/details/1892021