javascript - 如何根据下拉选择更改跨度的内容

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

您需要从下拉菜单的更改事件中调用您的函数:

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”元素之后的脚本 block 中，例如，如果您的脚本位于主体的末尾，那么您不需要将代码包装在文档中准备好的处理程序。)