Question

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

我的尝试：

下拉

<p id="test">
  Select a draft:
  <select id="Select" name="Select">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</p>

JS

$("#Select").change(function()
{
    alert($(this).val()); // IF THIS WORKS FINE THEN NEXT LINE CODE SHOULD WORK TOO
    alert($(this).text()); // WHY THIS SHOWS ALL THE DROPDOWN TEXTS
    alert($("#Select option:selected").text()); // THIS JUST WORKS FINE
});

问题1： $（this）表示什么？如果它表示所选元素，那么它也应该在执行$(this).text()时显示文本。但它没有按预期工作。

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

请指导我。

My JSFIDDLE Attempt

Answer 1

在change事件处理程序中，$(this)是<select>元素。

$(this)表示的元素取决于使用它的上下文它通常是触发事件的元素（如此处），或者是.each()循环迭代所针对的元素。

选择<option>后，<select>会将其选定的选项值作为值...
它不会对所选选项的文本执行此操作。

这就是为什么第二个alert()语句无效。

Answer 2

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

由于我们现在知道.text()会返回文字，并且这是更改的输入，我们可以推断您更喜欢使用.val()来获取值，因为它可能与显示文字。

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

Answer 3

如果您想获取所选的项目值和文本，可以尝试此操作：

JQuery

Answer 4

你好这个＆＃39; part是来自javascript的原始DOM元素$（this）使它成为jquery对象，因此你可以使用jquery。在这种情况下，它是选择。

如果我需要选择上面提到的下拉列表的值和文本，那么这是一种有效的方法。 是的，没关系。 jQuery get specific option tag text

Answer 5

回答问题1：

$(this)表示您将this传递给$函数。换句话说，您从jQuery对象创建this对象。在您的上下文中，this指的是与#Select选择器匹配的元素：您的select元素。

$(this).text()正常工作，因为它在innerText标记内部调用select：其中包含DOM和select的{{1}}代码}包含innerText的子项的所有文本（不是HTML）。

回答问题2：

要检索所选选项的标签：select

要检索所选选项的值：$("#Select option:selected").text()

Answer 6

您可以通过更改此内容来更改已写入的内容：

 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());
});

$（this）只是选择您选择使用“更改”的已识别对象，在这种情况下是选择框。

Answer 7

$("#Select").change(function()将此点后定义的函数绑定到HTML元素<select id="Select" name="Select">。因此，在该函数中，$(this)引用该Select元素。该选择元素中的信息是：<option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option>。这就是$(this).text()将为您提供所有选项的原因;你要求该元素内的所有文字。

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

Answer 8

this指的是用于调用函数的上下文。当您更改select选项时，this会引用整个选择下拉列表。

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

然而，当我打印$(this).text的值时，它给出了给出整个选择下拉内部文本的函数。

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

$("#Select").change(function()
{
    console.log($(this).val);
    
    console.log($(this).text);
    console.log($(this).val()); // IF THIS WORKS FINE THEN NEXT LINE CODE SHOULD WORK TOO
    console.log($(this).text()); // WHY THIS SHOWS ALL THE DROPDOWN TEXTS
    console.log($("#Select option:selected").text()); // THIS JUST WORKS FINE
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="test">
  Select a draft:
  <select id="Select" name="Select">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</p>

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

8 个答案: