Question

是否可以从输入文本字段更改页面上的元素以使用JavaScript选择选项元素？

我希望使用greasemonkey自定义某个页面。

Answer 1

您需要识别表单和输入元素（通过名称或ID）。您需要创建新的select元素，根据需要创建和添加尽可能多的option元素，最后将其插入到现有文本输入元素的位置。

例如，您可以使用以下内容：

// ** change 'form' and 'text' to correctly identify the form and text input element **
var inputElement = document.forms['form'].elements['text'];
var selectElement = document.createElement('select');

// get the existing input element's current (or initial) value
var currentValue = inputElement.value || inputElement.getAttribute('value');

// add a list of options to the new select element
// ** change value/text and add/remove options as needed **
var options = [{value: 'option1', text: 'Option 1'},
               {value: 'option2', text: 'Option 2'},
               {value: 'option3', text: 'Option 3'}];

options.forEach(function (option, i) {
    var optionElement = document.createElement('option');
    optionElement.appendChild(document.createTextNode(option.text));
    optionElement.setAttribute('value', option.value);
    selectElement.appendChild(optionElement);

    // if the option matches the existing input's value, select it
    if (option.value == currentValue) {
        selectElement.selectedIndex = i;
    }
});

// copy the existing input element's attributes to the new select element
for (var i = 0; i < inputElement.attributes.length; ++ i) {
    var attribute = inputElement.attributes[i];

    // type and value don't apply, so skip them
    // ** you might also want to skip style, or others -- modify as needed **
    if (attribute.name != 'type' && attribute.name != 'value') {
        selectElement.setAttribute(attribute.name, attribute.value);
    }
}

// finally, replace the old input element with the new select element
inputElement.parentElement.replaceChild(selectElement, inputElement);

如果它是一个普通的表单元素，没有附加很多脚本，它就相当简单了。但请注意，如果文本元素附加了任何脚本事件（焦点，更改，模糊等），那么这些事件将不再起作用。如果您希望select元素具有类似的脚本事件，则需要重新编写这些事件以应用于它。

新的select元素可能与原始input元素的大小/样式不同;如果您不喜欢默认外观，可以添加更多代码来更改新元素的样式。

JavaScript更改输入文本以选择选项

1 个答案: