Javascript如何选择Form IO下拉框
问题
有个网页，使用了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 && $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 && !$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 && !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 && !$select.isEmpty() && ($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 && $select.refreshing && $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 && $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 && $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。
如果有人了解，希望能远程协助我。
提供参考实例【javascript 自动完成下拉框】，期望对你编写程序有所帮助：https://blog.csdn.net/winderain/article/details/1892021
https://blog.csdn.net/weixin_43294560/article/details/102907837
希望有帮助
https://b23.tv/2xCZIVn
在chrome中打开调试窗口，在调试窗口中可以直接操作dom的方式,
基本上通过dom来操作就好了。
angular框架很少用到过,不过下拉框的组件跟其他框架应该都差不多
参考链接,希望有帮助哦
Angularjs select下拉多选实现_qq_39671783的博客-CSDN博客_angular select 多选
因为项目的需求，要求使用下拉多选来实现多个分类，网上搜了很多，包括jquery的select2，以及http://dotansimha.github.io/angularjs-dropdown-multiselect/docs/#/main里面的Basic Settings Example，可能是不会使用的原因，对于静态的option我是可以使用的，但是对于Angular的$scope变量的lis...
https://blog.csdn.net/qq_39671783/article/details/80448306?ops_request_misc=&request_id=&biz_id=102&utm_term=angular%E5%A6%82%E4%BD%95%E9%80%89%E6%8B%A9Form%20IO%E4%B8%8B%E6%8B%89%E6%A1%86&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~sobaiduweb~default-0-80448306.nonecase&spm=1018.2226.3001.4450
要不定义一个id 找到合适的时机操作dom 吧
js操作多选框
**获取指定打勾对象**
获取多选框对象,遍历
通过勾选属性checked为true来判断
function t1()
{
var favs=document.getElementsByName("fav");
for(var i=0;i<favs.length;i++)
{
/*打印只勾选的多选框*/
if(favs[i].checked)
{
alert(favs[i].value);
}
}
}
**全部打勾**
遍历多选框对象，将checked属性改为true或"checked"
function t2()
{
var fs=document.getElementsByName("fav");
for(var i=0;i<fs.length;i++)
{
fs[i].checked="checked";
}
}
**全部撤销打勾**
遍历多选框对象,将checked属性改为false
function t3()
{
var fs=document.getElementsByName("fav");
for(var i=0;i<fs.length;i++)
{
fs[i].checked=false;
}
}
**反选**
遍历多选框对象，将checked的属性值变反
function t4()
{
var fs=document.getElementsByName("fav");
for(var i=0;i<fs.length;i++)
{
fs[i].checked=!fs[i].checked;
}
}
js操作下拉框
通过获取select对象
var sel=document.getElementById("address");
**获取下拉框option对象的value值**
sel.value; 获取当前下拉框的value值
**获取下拉框对象的集合**
select对象名.options
var os=sel.options;
获取option对象的value值
os[i].value;
获取option对象的文本内容
osp[i].text;
for(var i=0;i<os.length;i++)
{
alert(os[i].value+":"+os[i].text);
}
**获取指定下拉框内容**
通过selected属性内容同多选框的checked方式来判断
for(var i=0;i<os.length;i++)
{
if(os[i].selected)
{
alert(os[i].value+":"+os[i].text);
}
}
第一种方法，js里面直接增加船体加载方法
window.onload=MyAutoRun(); //仅需要加这一句
```
第二种方法，修改网页的Body为：
```javascript
<body onLoad="MyAutoRun();">
或者
<body onLoad="javascript:MyAutoRun();">
```
浏览器里面新增的控制台下拉框是什么意思，你想在网页上增加下拉功能么，功能模块需要源代码，你在网页上的所有的动作都会以html的形式传给服务器，然后再响应。你的操作不是本地的，所以只有有源码的情况才能进行修改。
<select id="ddl_example4" name="ddl_example4">
<option value="1">item1</option>
<option value="2">item2</option>
<option value="3">item3</option>
<option value="4">item4</option>
<option value="5">item5</option>
<option value="6">item6</option>
</select>
<script>
function setSelectedIndex(s, v) {
for ( var i = 0; i < s.options.length; i++ ) {
if ( s.options[i].text == v ) {
s.options[i].selected = true;
return;
}
}
}
setSelectedIndex(document.getElementById('ddl_example4'),"item4");
</script>