您如何使用jQuery获取选择表单输入的值？

Question

我设置了此示例代码，以尝试在较大的网站上跟踪问题，但我不明白为什么该值会不断返回未定义状态。

<script>
    function echo(){
        value = $('input[name=select_form]').val();
        $(document).ready(function(){
                $('#test_div').append("<p>" + value + "</p>"); 
            })          
        }
</script>

</head>

<table>
    <tr>
        <td>select an option</td>
        <td><select name = "select_form">
                <option value="Alpha">Alpha</option>
                <option value="Beta">Beta</option>
             </select>
        </td>
    </tr>
</table>

<input type='button' value='echo' name='submitbtn' onclick='echo()' />

<div id = "test_div"> </div>

Answer 1

您的选择器错误，您定位的是select元素，而不是input元素

value = $('select[name=select_form]').val();

演示： 小提琴

注意：也不需要dom ready处理程序-如果要使用它，请在dom ready处理程序内使用适当的jQuery事件处理程序

<input type='button' value='echo' name='submitbtn' />

然后

jQuery(function () {
    $('input[name="submitbtn"]').click(function () {
        var value = $('select[name=select_form]').val();
        $('#test_div').append("<p>" + value + "</p>");
    })
})

演示： 小提琴

Answer 2

我认为$('select[name=select_form] option:selected').text()将起作用。