无法通过jquery按值获取选择选项

Question

我有一个选择输入。 我想按其值选择一个选项。 当我运行此代码时：

$('#monthYear').click(function(){
  op = $('#monthYear option[value="x"]');
  $(op).css('color','red');
});

什么都没发生，所以我跑了：

console.log(op.value);

它返回： undefined 。 谁能看到我在做什么错？ 看看这个jsfiddle 。 谢谢

HTML

<select id = "monthYear">
  <option>x</option>
  <option>y</option>
  <option>z</option>
</select>

Answer 1

要使用jQuery获取值，必须使用.val() 。

或者，您可以使用op[0].value ，那样您将获得与jQuery对象中的op变量匹配的第一个元素。

下面的代码片段显示只有x选项可以使用

 $('#monthYear').click(function(){ op = $('#monthYear option[value="x"]'); op.css('color','red'); console.log(op.val()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="monthYear"> <option value="TEST">Choose Me</option> <option value="x">the X</option> </select> 

Answer 2

您可能想捕获事件change ：

• 使用此选择器获取选定的选项： $('#monthYear option:selected')
• 返回的对象由jQuery包装，因此要获取TEXT，请使用$.text()函数。

 $('#monthYear').on('change', function() { var $op = $('#monthYear option:selected'); $op.css('color', 'red'); console.log($op.text()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="monthYear"> <option value="x">x</option> <option value="y">y</option> <option value="z">z</option> </select> 

Answer 3

尝试这个。 这是JSFiddle 。

 $('#monthYear').click(function(){ op = $('#monthYear option[value="x"]'); $(op).css('color','red'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="monthYear"> <option value="x">x</option> <option value="y">y</option> <option value="z">z</option> </select> 

我不确定这是否是您想要的。 我所做的就是为您的<option>添加value属性。 您的jQuery选择器之前无法正常工作。

Answer 4

您的option标签根本没有值，因此无法通过其值属性来选择它们，例如[value="x"] 。 在您的情况下， x只是option元素的文本节点。 尝试将属性value="x"到选项标签中，您将到达所需的DOM元素。 因此，您的CSS将被应用到它。 https://jsfiddle.net/2ryq0w62/