Question

我对选择下拉列表和输入文本框使用相同的CSS。我这样在jquery中设置值：

$('.a').val('2');

当检查select和input元素的值时，它们已正确分配，但是当我通过console.log显示它们的值时，两者都未定义。为什么会这样？

console.log($('.a').find('select').val());
console.log($('.a').find('input').val());

结果：

undefined
undefined

这是我的小提琴：http://jsfiddle.net/04oLs3he/12/

Answer 1

您的选择器不正确（不需要find）。尝试关注

$('.a').val('2');

console.log($('select.a').val());
console.log($('input.a').val());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="a">
<option value="1">One</option>
<option value="2">Two</option>
</select>

<input type="text" class="a" value="Three">

Answer 2

请勿使用.find()来获取值，因为它将在所选元素内搜索子元素input / select。

不要使用相同的selector获取两个元素，请使用$('input.a')获取input和$('select.a')获取下拉元素：

console.log($('select.a').val());
console.log($('input.a').val());

注意：

如果您要在更改input中的选项时更改select的值，请使用change()事件来跟踪此更改。

演示：

$('select.a').change(function() {
  $('input.a').val($(this).val());
});

console.log($('select.a').val());
console.log($('input.a').val());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="a">
<option value="1">One</option>
<option value="2">Two</option>
</select>

<input type="text" class="a" value="Three">

Answer 3

尝试改用filter。 find会尝试查找所选元素的子元素，这与过滤器不同，后者会过滤所选元素：

$('.a').val('2');

console.log($('.a').filter('select').val());
console.log($('.a').filter('input').val());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="a">
<option value="1">One</option>
<option value="2">Two</option>
</select>

<input type="text" class="a" value="Three">

设置具有相同CSS类的两个元素的值

3 个答案: