Javascript 如何基于下拉选择更改范围的内容

我有一个选择框和一个带有span的标签，我想在用户更改下拉框上的选择时替换span内容

<select class="text_select" id="field_6" name="field_6">    
<option value="- Select -">- Select -</option>  
<option value="Option One">Option One</option>  
<option value="Option Two">Option Two</option>  
<option value="Option Three">Option Three</option>  
</select>

<label class="form_field">Your selected <span id="aggregator_name"></span>?</label>

我正在使用这个脚本

<script type="text/javascript">
function notEmpty(){

var e = document.getElementById("field_6");
var strUser = e.options[e.selectedIndex].value;
document.getElementById('aggregator_name').innerHTML = strUser;

}
notEmpty()
</script>

问题是，每当我刷新页面时，span都会替换为-Select-但当我将下拉列表更改为另一个选项时，它不会更改span的内容？

---

请帮助大家。

您需要从下拉列表的更改事件调用您的函数：

document.getElementById("field_6").onchange = notEmpty;

演示：

或者，由于使用了jquery标记，以下内容将替换所有JS：

$(document).ready(function() {
    $("#field_6").change(function() {
        $('#aggregator_name').html($(this).val());
    }).change();
});

演示：

注意：如果上述内容包含在field_6元素之后出现的脚本块中，例如，如果脚本位于正文的末尾，则不需要将代码包装到文档就绪处理程序中。

工作演示

行为：当你要改变任何事情时，你会在span中看到卡恩奇

希望这有帮助，如果我遗漏了什么，请告诉我！`：~

代码

您可以使用onchange

var e = document.getElementById("field_6");
e.onchange = function() {
    var strUser = e.options[e.selectedIndex].value;
    document.getElementById('aggregator_name').innerHTML = strUser;
}

---

@user1074803无需担心：很高兴它有帮助！不客气。但我不明白你的更新和我的答案有什么关系？请注意，当您有一个id时，选择器字段_6比选择器字段_6好-当id是唯一的时，无需指定标记名。

var e = document.getElementById("field_6");
e.onchange = function() {
    var strUser = e.options[e.selectedIndex].value;
    document.getElementById('aggregator_name').innerHTML = strUser;
}