基于下拉框选择填充文本框的JS功能异常求助

问题描述 #

无法实现根据下拉框选择为文本框填充内容的功能，期望效果为：当下拉框选中option2时，文本框自动填入option2。

原代码 #

JavaScript 代码

(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;
    }
}
)()

HTML 代码

<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>

错误分析与修复方案 #

1. 拼写错误：getElementsByClassname方法名称拼写错误，正确写法为getElementsByClassName（注意Name中的大写N）。
2. 集合访问问题：getElementsByClassName返回的是HTMLCollection类型的元素集合，不能直接以单个元素的方式访问options属性或设置value，需要通过索引[0]获取集合中的第一个元素。
3. 简化事件处理：事件处理函数中可以直接通过event.target获取触发事件的下拉框元素，无需重新查询DOM，提升效率。

修正后的JavaScript代码 #

(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];

                var array = ["option1", "option2", "option3", "option4"];

                var selectList = document.createElement("select");
                selectList.setAttribute('class', 'ddclass');
                selectList.setAttribute('id', 'ddid');
                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(event) {
        // 通过事件源直接获取下拉框选中的文本
        var selectedText = event.target.options[event.target.selectedIndex].text;
        // 获取文本框并设置值
        document.getElementsByClassName("input-large")[0].value = selectedText;
    }
}
)()

额外优化建议 #

• 可以用document.querySelector替代getElementsByClassName，直接获取单个元素，代码更简洁：

  // 获取文本框并设置值
  document.querySelector(".input-large").value = selectedText;
  

内容的提问来源于stack exchange，提问作者Karthik