0

在从列表中进行选择后，如何在不使用按钮的情况下获取要显示的值。我试图为选择列表实现一个 onChange 事件，并取消按钮，但我无法让它工作。在选择选项 (a,b,c) 后，我希望值 (1,2,3) 显示在选择框下方。

<script>
    function displayResult() {

        this.nextSibling.nodeValue = document.getElementById("mySelect").value;
    }
</script>
<body>
    <form>
        <select id="mySelect" style="width:220px">
            <option value="1">a</option>
            <option value="2">b</option>
            <option value="3">c</option>
        </select>
    </form>
    <button type="button" onclick="displayResult.call(this)">List Locations</button>

http://jsfiddle.net/8ZkR2/

4

3 回答 3

0

如果您使用的是 JQuery，您可以这样做：

HTML：

<form>
    <select id="mySelect" style="width:220px">
        <option value="1">a</option>
        <option value="2">b</option>
        <option value="3">c</option>
    </select>
    <div id="myDiv"></div>
</form>

JS：

$(document).ready(function() {
    $('#mySelect').on('change', function () {
        $('#myDiv').html(this.value);
    });
});

小提琴：http: //jsfiddle.net/qv7cj/

于 2013-10-31T21:58:15.193 回答
0

使用 jQuery：

$('#mySelect').change(function(){
    //do stuff
})
于 2013-10-31T21:53:51.767 回答
0 
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript">
        $(document).on('ready', function(){
            $('#mySelect').on('change', function(){
                console.log($('#mySelect').find('option:selected').attr('value'));
            })
        });

    </script>
</head>
<body>`enter code here`
<form>
    <select id="mySelect" style="width:220px">
        <option value="1">a</option>`enter code here`
        <option value="2">b</option>
        <option value="3">c</option>
    </select>
</form>
<button type="button" onclick="displayResult.call(this)">List Locations</button>
</body>
</html>

pls try this
于 2013-10-31T22:21:38.907 回答