使用jquery [duplicate]获取所选选项的值

This question already has an answer here:

这个问题在这里已有答案：

Get selected value of a dropdown's item using jQuery 30 answers
使用jQuery 30答案获取下拉列表项的选定值

My question may be stupid, because I am new to web development and I am so confused now.

我的问题可能很愚蠢，因为我是网络开发的新手，现在我很困惑。

First part of my question is that, sometimes when I print stuff using console.log(some element), it gives me a giant object with all the listeners but sometimes it just returns a html string merely like this:

我的问题的第一部分是，有时当我使用console.log（某个元素）打印东西时，它给了我一个包含所有侦听器的巨大对象，但有时它只返回一个html字符串，就像这样：

<option value="CS 245">CS 245</option>

The way I found some element like above is using selector as follows:

我在上面找到一些元素的方法是使用选择器如下：

$( ".course_list option:selected" )[0]

I am sorry about my terminology here because I really want to know the difference between the complex object and the object above (also the name of them). I have tried my best to choose my words, but I fail to make it clearer due to lack of experience. If someone understand what I mean please help me edit this question and provide answers, thanks in advance.

我对这里的术语感到抱歉，因为我真的想知道复杂对象和上面的对象之间的区别（也就是它们的名称）。我尽力选择我的话，但由于缺乏经验，我没有把它弄清楚。如果有人理解我的意思，请帮助我编辑这个问题并提供答案，在此先感谢。

Then the second part of my question is that I want to get that "CS 245" string from the above object.I have tried

然后我的问题的第二部分是我想从上面的对象得到“CS 245”字符串。我试过了

$( ".course_list option:selected" )[0].val();
$( ".course_list option:selected" )[0].attr("value");
$( ".course_list option:selected" )[0].text();

but all of them give me this error:

但他们都给了我这个错误：

Uncaught TypeError: undefined is not a function

I have included jquery and there is no other crash/file_not_found shown in console. I am using latest bootstrap and formstone selecter, but I am not sure how that affects me here.

我已经包含了jquery，并且控制台中没有显示其他崩溃/ file_not_found。我正在使用最新的bootstrap和formstone selecter，但我不确定这对我有什么影响。

Can anybody help?

有人可以帮忙吗？

5 个解决方案

#1

You don't need to convert it to ~~javascript object~~ raw DOM Element, just do this:

您不需要将其转换为javascript对象原始DOM元素，只需执行以下操作：

$( ".course_list option:selected" ).val()

When you do $( ".course_list option:selected" )[0] you are getting raw DOM Element it is not a jquery object so call val() on it will give you error.

当你执行$（“.course_list选项：选中”）[0]你得到原始DOM元素它不是一个jquery对象所以调用它上面的val（）会给你错误。

With DOM element you can try it like this:

使用DOM元素，您可以像这样尝试：

$( ".course_list option:selected" )[0].getAttribute("value")

For more understanding you can refer this SO Post

为了更多的理解，你可以参考这篇SO帖子

#2

It's very simple you just use this :

你只需要使用它就很简单：

$(".course_list").val();

#3

Just get the select and execute the val method:

只需获取select并执行val方法：

$('.course_list').val();

$(function () {
  $('#get').on('click', function () {
    var value = $('.course_list').val();
    alert(value);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="course_list">
  <option value="1">Item 1</option>  
  <option value="2">Item 2</option>
  <option value="3">Item 3</option>
  <option value="4">Item 4</option>
</select>

<input type="button" value="Get Value" id="get" />

#4

Use:

使用：

$(".course_list").val()

The value of the <select> is the value of the selected option.

You don't need to use [0]. You use that when you want to get the DOM element that the jQuery object contains, so that you can call ordinary DOM methods on it instead of jQuery methods. E.g. you could write:

您不需要使用[0]。当你想获得jQuery对象包含的DOM元素时，可以使用它，这样就可以在其上调用普通的DOM方法而不是jQuery方法。例如。你可以写：

$(".course_list")[0].value

because .value is a DOM property.

因为.value是一个DOM属性。

#5

You can get it in proper way. Below will definitely helps you.

你可以以适当的方式得到它。以下肯定会帮助你。

<select id="myselect">
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Ms</option>
<option value="4">Dr</option>
<option value="5">Prof</option>
</select>

// To Get Text
$("#myselect option:selected").text();

// To Get Value
$("#myselect option:selected").val();

#1