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

Answer 2

工作演示 http://jsfiddle.net/GEfwE/1/

行为：当你改变任何东西时，你会看到跨度的变化，

希望这会有所帮助，如果我错过了什么，请让我知道！`:)~

代码

$('select').change(function(){

    $('#aggregator_name').html($(this).val());
});
​

Answer 3

你可以使用onchange。

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