如何基于下拉选择更改跨度的内容

Question

我有一个选择框和一个带跨度的标签，我想替换跨度内容，因为用户在下拉框上更改了选择。

<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的内容吗？请帮助大家。

Answer 1

您需要从下拉菜单的change事件中调用函数：

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

演示：http：//jsfiddle.net/Mj4Vj/

或者，由于您使用了“ jquery”标签，因此以下内容替换了所有JS：

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

演示：http：//jsfiddle.net/Mj4Vj/1/

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