如何在Javascript中从下拉列表中获取文本和值

我有一个非常基本的问题。我想从下拉列表中选择所选文本和下拉值，并显示在警报框中

我的尝试：

下拉列表

问题1：这意味着什么？如果它表示所选元素，则在执行$this.text时也应显示文本。但它并没有像预期的那样起作用

问题2：如果我需要选择上面提到的下拉列表的值和文本，这是一种有效的方法

请引导我

---

您好，'this'部分是javascript$中的原始DOM元素，这使它成为jquery对象，因此您可以使用jquery。在这种情况下，它是select

如果我需要选择上面提到的下拉列表的值和文本，这是一种有效的方法。 是的，很好。

在您的示例中，关键字this表示触发事件的元素。这意味着选择元素。text返回元素中包含的所有文本，因此它提供所有元素。val返回输入的值，在这种情况下，它将返回select的值，但请注意，如果设置multiple=true，它不会返回多个值

由于我们现在知道.text返回文本，而这是更改的输入，我们可以推断您更喜欢使用.val来获取值，因为它可能与显示文本不同

alert($(this).find("option:selected").val());

对问题1的答复：

$这意味着将其传递给$函数。换句话说，您可以从this对象创建jQuery对象。在您的上下文中，这是指与Select选择器匹配的元素：您的Select元素

$this.text正常工作，因为它在内部调用select标记上的innerText:该标记包含select的DOM代码，而innerText包含select子级的所有非HTML文本

对问题2的答复：

要检索所选选项的标签：$Select option:selected.text

要检索所选选项的值：$Select option:selected.val

$此选项用于使此对象成为包含一些额外功能的JQuery对象

如果要获取所选项目值和文本，可以尝试以下操作：

$(this).find(":selected").val(); // Gets the value of the selected option, if the value attribute in the option element is null it will give you the text

$(this).find(":selected").text(); // Gets the text of the selected option

在更改事件处理程序中，$this是元素

由$this表示的元素取决于使用它的上下文。 它通常是触发像这里这样的事件的元素，或者是一个.each循环的迭代所针对的元素

选择时，将其所选选项值作为值。。。 它不会对所选选项的文本执行此操作

---

这就是第二条警报语句不起作用的原因。

您可以通过更改以下内容来更改您已经编写的内容：

 alert($(this).val() + $(this).text());

致：

总的来说，给你已经有的代码

$("#Select").change(function()
 {
     alert($(this).val() + $("option:selected", this).text());

     alert($("#Select option:selected").text());
});

$这只是选择要使用“更改”的已标识对象，在本例中，该对象是选择框。

$select.changefunction将在此点之后定义的函数绑定到HTML元素。因此，在该函数中，$this引用该Select元素。该select元素中的信息是：一 二 三这就是为什么$This.text将为您提供所有选项；您需要该元素中的所有文本

$this.val获取整个select元素的值，该元素是当前所选选项的文本。

这是指用于调用函数的上下文。 更改“选择”选项时，将引用整个“选择”下拉列表

如果您看下面，当我打印$this.val的值时，它会给出一个函数，返回所选选项的值

然而，当我打印$this.text的值时，它给出了一个函数，该函数给出了整个select下拉列表的内部文本

为了回答第二个问题，我认为$this.val更有效，因为使用$this将始终引用调用函数的上下文。因此，您可以使用它创建模块化代码，方法是将匿名函数的使用分离为命名函数，并将其用于站点中的其他select下拉列表（如果将来需要）

$Select.changefunction { console.log$this.val； console.log$this.text； console.log$this.val；//如果这可以正常工作，那么下一行代码也可以 console.log$this.text；//为什么显示所有下拉文本 console.log$Select option:selected.text；//这很好用 };

选择草稿： 一 二 三

---

$这是选择本身，而不是选择的选项为什么投反对票。我已经添加了我的小提琴尝试，也添加了我的doutsno，$this目标是所有名为this的DOM元素，这些元素不存在。你当然是说$this@Salketer-是的，头用thxup@Unbreakable-我没有downvote@Unbreakable为什么对我的答案有这样的评论？接受你的答案是因为这一行当一个选项被选中时，选择它的选项值作为一个值。。。它是d

---

oesn不会对所选选项的文本执行此操作。感谢您的澄清。

 alert($(this).val() + $(this).text());

 alert($(this).val() + $("option:selected", this).text()); 

$("#Select").change(function()
 {
     alert($(this).val() + $("option:selected", this).text());

     alert($("#Select option:selected").text());
});