此处无法根据下拉选择在文本框内添加文本。
示例：如果我在下拉列表中选择option2，文本框将填充为option2
(function() {
'use strict';
setInterval(function () {
if (document.getElementById('ddid')) {
console.log('Found Tag dropdown button');
return;
}
var widgetcontentwrapper = document.getElementsByClassName('widget-content-wrapper');
if (widgetcontentwrapper.length > 0) {
console.log('Found widgetcontentwrapper controls');
var buttonToolbar = widgetcontentwrapper[0].children[0];
//Create array of options to be added
var array = ["option1", "option2", "option3", "option4"];
//Create and append select list
var selectList = document.createElement("select");
selectList.setAttribute('class', 'ddclass');
selectList.setAttribute('id', 'ddid');
//myParent.appendChild(selectList);
selectList.addEventListener('change', favTutorial, false);
var div = document.createElement('div');
div.setAttribute('class', 'flex-item');
div.appendChild(selectList);
buttonToolbar.insertBefore(div, buttonToolbar.firstChild);
for (var i = 0; i < array.length; i++) {
var option = document.createElement("option");
option.value = array[i];
option.text = array[i];
selectList.appendChild(option);
}
}
},
3000)
function favTutorial() {
var mylist = document.getElementsByClassname("ddclass");
document.getElementsByClassname("input-large").value = mylist.options[mylist.selectedIndex].text;
}
}
)()<div class="widget-content-wrapper">
<div class="arrow"></div>
<form class="input-compressed"><fieldset>
<legend class="offscreen">
Add a Tag
</legend>
<div class="editable-field-change">
<span class="input-append input-smaller"><input class="input-large" data-link="proposedTag" placeholder="Add a tag (any text)..." size="16" type="text">
</span>
</div>
<div class="tags">
<ul class="unstyled editable-list inline-list"></ul>
</div>
</fieldset></form>
</div>这里有两个问题。首先，方法是getElementsByClassName()，而不是getElementsByClassname()——注意大写字母"N"。
其次，该方法返回一个类似数组的对象，而不是单个Element对象。因此，您不能直接在上面调用value或options。假设问题中只有一个元素的实例，则可以使用[0]访问集合中的第一个元素。
(function() {
'use strict';
setInterval(function() {
if (document.getElementById('ddid')) {
console.log('Found Tag dropdown button');
return;
}
var widgetcontentwrapper = document.getElementsByClassName('widget-content-wrapper');
if (widgetcontentwrapper.length > 0) {
var buttonToolbar = widgetcontentwrapper[0].children[0];
//Create array of options to be added
var array = ["option1", "option2", "option3", "option4"];
//Create and append select list
var selectList = document.createElement("select");
selectList.setAttribute('class', 'ddclass');
selectList.setAttribute('id', 'ddid');
//myParent.appendChild(selectList);
selectList.addEventListener('change', favTutorial, false);
var div = document.createElement('div');
div.setAttribute('class', 'flex-item');
div.appendChild(selectList);
buttonToolbar.insertBefore(div, buttonToolbar.firstChild);
for (var i = 0; i < array.length; i++) {
var option = document.createElement("option");
option.value = array[i];
option.text = array[i];
selectList.appendChild(option);
}
}
}, 3000)
function favTutorial() {
var mylist = document.getElementsByClassName("ddclass")[0];
document.getElementsByClassName("input-large")[0].value = mylist.options[mylist.selectedIndex].text;
}
})()<div class="widget-content-wrapper">
<div class="arrow"></div>
<form class="input-compressed">
<fieldset>
<legend class="offscreen">
Add a Tag
</legend>
<div class="editable-field-change">
<span class="input-append input-smaller"><input class="input-large" data-link="proposedTag" placeholder="Add a tag (any text)..." size="16" type="text">
</span>
</div>
<div class="tags">
<ul class="unstyled editable-list inline-list"></ul>
</div>
</fieldset>
</form>
</div>话虽如此，您的代码正在做一些非常奇怪的事情。为什么要反复尝试创建select元素，并在第一次迭代后已经存在的情况下退出函数？
根据上下文，我假设这是一种检查DOM的基本方法，以查看是否从某个外部源创建了动态元素。如果是这种情况，请使用MutationObserver。
此外，请避免在JS代码中生成HTML。把它放在<template />元素中并克隆它。这样JS中就不会有任何HTML逻辑。
以下是一个完整的工作示例：
(function() {
'use strict';
// define MutationObserver to check the DOM for new .widget-content-wrapper elements being created
var newWidgetContainerObserver = new MutationObserver(mutations => {
mutations.forEach(m => {
m.addedNodes.forEach(n => {
if (n.className === 'widget-content-wrapper')
createSelectForWidget(n);
});
});
});
newWidgetContainerObserver.observe(document, { attributes: false, childList: true, characterData: false, subtree: true });
let widgetContainer = document.querySelector('#widget-container');
// when a new .widget-content-wrapper node is added to the DOM by external
// code, append the select to it.
let createSelectForWidget = node => {
let selectTemplate = document.querySelector('#dd-template').content.cloneNode(true);
let container = node.querySelector('.arrow');
let html = container.appendChild(selectTemplate);
container.addEventListener('change', favTutorial);
}
// event handler for the dynamically created select element, which sets
// the value of the related input
let favTutorial = e => {
let select = e.target;
let container = select.closest('.widget-content-wrapper');
container.querySelector('.input-large').value = select.value;
}
// only for this demo, generates content on button click - mocking the
// external process which is updating your DOM
document.querySelector('#test').addEventListener('click', e => {
let widgetClone = document.querySelector('#widget-template').content.cloneNode(true);
widgetContainer.appendChild(widgetClone);
});
})()<button id="test">Test - dynamically append new widget</button>
<div id="widget-container"></div>
<template id="widget-template">
<div class="widget-content-wrapper">
<div class="arrow"></div>
<form class="input-compressed">
<fieldset>
<legend class="offscreen">Add a Tag</legend>
<div class="editable-field-change">
<span class="input-append input-smaller"><input class="input-large" data-link="proposedTag" placeholder="Add a tag (any text)..." size="16" type="text">
</span>
</div>
<div class="tags">
<ul class="unstyled editable-list inline-list"></ul>
</div>
</fieldset>
</form>
</div>
</template>
<template id="dd-template">
<div class="flex-item">
<select class="ddclass" id="ddid">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
</select>
</div>
</template>