Question

我需要在某个jquery的<select>元素中发送所选选项的值，以发送到我的php文件。

不幸的是，我一直在为它获得一个未定义的值......

<select name="query" id="query">
    <option value="join-us">Join Us</option>
    <option value="work-with-us">Work with us</option>
    <option value="about-pf">About Planet Fitness</option>
    <option value="other">Other</option>
</select>

var query = $('#query option:selected').text();

console.log('query = ' + query);

console.log返回

query = undefined

我尝试过使用$('#query').val();和$('#query').text();

我不知道还能做什么。

在我看来，:selected伪造的类需要选项在标记中显示如下。

<option value="bla" selected="selected">bla</option>

显然，我错过了这些，但是更改下拉列表中的选择并没有改变这一点，我认为将自己添加到标记中没有任何意义......

非常感谢任何帮助

Answer 1

您应该使用.val()

$('#query').change(function () {
    var query = $(this).val();
    $('#result').html('query = ' + query);
});

您应该在提交的那一刻致电$('#query').val()。

http://jsfiddle.net/33GSy/1/

Answer 2

这里你去...使用jQuery 1.8.3 ...

实验1 ：Live Demo

<强>代码

<select name="query" id="query">
    <option value="join-us">Join Us</option>
    <option value="work-with-us">Work with us</option>
    <option value="about-pf">About Planet Fitness</option>
    <option value="other">Other</option>
</select>

<script>
    var query1 = $('#query option:selected').text();
    var query2 = $('#query').val();
    var query3 = $('#query').text();

    alert('query1 = ' + query1 + '\nquery2 = ' + query2 + '\nquery3 = ' + query3);
    console.log('query1 = ' + query1 + '\nquery2 = ' + query2 + '\nquery3 = ' + query3);
</script>

<强>输出

铬：

query1 = Join Us
query2 = join-us
query3 = 
    Join Us
    Work with us
    About Planet Fitness
    Other

IE：

query1 = Join Us
query2 = join-us
query3 = Join Us Work with us About Planet Fitness Other

火狐：

query1 = Join Us
query2 = join-us
query3 = 
    Join Us
    Work with us
    About Planet Fitness
    Other

实验2 ：Live Demo

<强>代码

    <script>
        function getMyValue() {
            var query1 = $('#query option:selected').text();
            var query2 = $('#query').val();
            var query3 = $('#query').text();

            alert('query1 = ' + query1 + '\nquery2 = ' + query2 + '\nquery3 = ' + query3);
            console.log('query1 = ' + query1 + '\nquery2 = ' + query2 + '\nquery3 = ' + query3);
        }
    </script>
</head>

<body>
    <select name="query" id="query">
        <option value="join-us">Join Us</option>
        <option value="work-with-us">Work with us</option>
        <option value="about-pf">About Planet Fitness</option>
        <option value="other">Other</option>
    </select>

    <button onclick="getMyValue();">Click Me</button>
</body>

输出（选择“与我们合作”后点击按钮

铬：

query1 = Work with us
query2 = work-with-us
query3 = 
    Join Us
    Work with us
    About Planet Fitness
    Other

IE：

query1 = Work with us
query2 = work-with-us
query3 = Join Us Work with us About Planet Fitness Other

火狐：

query1 = Work with us
query2 = work-with-us
query3 = 
    Join Us
    Work with us
    About Planet Fitness
    Other

<强>推断

您的代码运行正常，应该是您调用它的方式有问题，尝试在整个地方发出警报......

Answer 3

您何时致电$('#query option:selected').text();？

这对我来说很好用：

$('#query').change(function() {
    var query = $('#query option:selected').text();

    console.log('query = ' + query);
})

JSFiddle

编辑：downvote是什么？我提供的示例在Chrome和IE中运行良好。

这是一个更新版本，显示与按钮点击事件完全相同的事情：JSFiddle。

Answer 4

$('#query option').filter(':selected').val();

请参阅JSFIDDLE

Answer 5

这很好用。

var query = $('#query option:selected').text();
console.log('query = ' + query);

请参阅下面的jsFiddle：

http://jsfiddle.net/FJCSu/3/

在jquery中使用DropDown值

5 个答案: