jquery - 如何使用 jQuery 显示选择表单的值？

Question

我有以下代码：

<select id="testlist" class="select-block span8">
    <option value="0">Red</option>
    <option value="1" selected="selected">Yellow</option>
    <option value="2">Blue</option>
    <option value="3">Green</option>
</select>
<div id="result"></div>

选择后，我希望 div“结果”自动更新以显示所选选项的值。例如，如果我选择蓝色，我希望 div 显示“2”。

我试过了：

<script>$('#testlist').val()</script> 

没有运气

使用 jQuery（或 javascript，如果这更明智的话），我将如何做到这一点？

Answer 1

应该可以正常工作：

//when the select changes
$('#testlist').on('change', function() {
    //set the text to the select's value
    $('#result').text($(this).val());
}

取决于你的 div 是否有result它的 ID。你可以在这里看到一个工作的 jsFiddle：http: //jsfiddle.net/MQBJ6/

Answer 2

@Chad 的答案将适用于 jQuery - 如果您不使用 jQuery，您可以随时使用：

<select id="testlist" class="select-block span8" onChange="setDiv();">
    <option value="0">Red</option>
    <option value="1" selected="selected">Yellow</option>
    <option value="2">Blue</option>
    <option value="3">Green</option>
</select>
<div id="result"></div>

<script>
    function setDiv(){
        var testlist = document.getElementById('testlist').value;
        document.getElementById('result').innerHTML = testlist;
    }
</script>

在此处查看 jsFiddle http://jsfiddle.net/jreljac/amara/