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 - ”但是当我将下拉列表更改为另一个选项时，它不会更改跨度的内容？请帮帮我们。

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;
}

如何根据下拉选择更改范围的内容

3 个答案: