Question

当我在我的选择框中手动选择时，我的onchange事件似乎仅适用于我的选择框，但是，如果我使用按钮以编程方式进行选择，则看起来根本不会触发onchange按钮。如何修改以下代码，以便可以添加功能以从手动选择和按钮触发onchange事件？

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript">

function record_select() {

    var x = document.getElementById('comments').value
    var y = document.getElementById('cars').value

    if (y) {
        if (x) {
            document.getElementById('comments').value = document.getElementById('cars').value + ' was selected\n\n' + x
        }
        else {
            document.getElementById('comments').value = document.getElementById('cars').value + ' was selected'
        }
    }
}
function change_select() {

    document.getElementById('cars').value = 'audi'

}
</script>

</head>

<body>

<select id="cars" onchange="record_select()">
    <option value=""></option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select> 
<br>
<textarea id="comments" style="width: 400px; height: 50px;"></textarea>
<br>
<input type="button" value="change" onclick="change_select()">
</body>

</html>

Answer 1

在更改onchange()的值后，将select方法添加到您的函数中。您可能还希望包含一项检查，以确保连续两次无法选择audi：

function change_select() {
    select = document.getElementById('cars');
    if(select.value != 'audi'){
        select.value = 'audi';
        select.onchange();
    }
}

JSFiddle

如果您需要满足所有浏览器的需求，触发更改事件的方式将会改变。我会把这个留给你 - this post来帮助你。

Answer 2

将change_select（）函数更改为

function change_select() {
    document.getElementById('cars').options[4].selected = true;
    record_select()
}

从按钮触发选择框的onchange事件

2 个答案:

将change_select（）函数更改为