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“result”自动更新以显示所选选项的值。例如，如果我选择了蓝色，我希望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/

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

2 个答案: