当使用'最接近的':jQuery
Select2 .val function returning empty value when selected using 'closest' : jQuery
我有一个包含复选框、一些文本和select2下拉列表的表。用户将选中一个复选框,然后在select2下拉框中选择一个值。我试图了解用户是否在select2框中选择了与选中复选框相对应的值。
以下是我的代码:
var value = [{
id: 0,
text: 'enhancement'
}, {
id: 1,
text: 'bug'
}, {
id: 2,
text: 'duplicate'
}, {
id: 3,
text: 'invalid'
}, {
id: 4,
text: 'wontfix'
}]
$(document).ready(function() {
$(".bulk_relationship_dropdown").select2({
data: value
})
$("#submit").click(function() {
jQuery(".bulk_relationship_dropdown").each(function() {
if (jQuery(this).val() != "") {
console.log(jQuery(this).val());
}
})
$(".cb:checked").each(function() {
var cb = $(this);
if (cb.closest('tr').find('.bulk_relationship_dropdown').val() == "") {
console.log("here"); //do something
}
})
});
});
.select2-container {
margin-top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" rel="stylesheet" />
<br>
<table>
<tr>
<td>
<input type="checkbox" class="cb">
</td>
<td>some random text</td>
<td>
<input type="text" style="width: 120px" class="bulk_relationship_dropdown">
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="cb">
</td>
<td>some random text</td>
<td>
<input type="text" style="width: 120px" class="bulk_relationship_dropdown">
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="cb">
</td>
<td>some random text</td>
<td>
<input type="text" style="width: 120px" class="bulk_relationship_dropdown">
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="cb">
</td>
<td>some random text</td>
<td>
<input type="text" style="width: 120px" class="bulk_relationship_dropdown">
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="cb">
</td>
<td>some random text</td>
<td>
<input type="text" style="width: 120px" class="bulk_relationship_dropdown">
</td>
</tr>
</table>
<button id="submit">submit</button>
在上面的代码中,当我遍历所有复选框时,.val()
函数会给我正确的值。这就是这部分。
jQuery(".bulk_relationship_dropdown").each(function() {
if (jQuery(this).val() != "") {
console.log(jQuery(this).val());
}
})
但是,当我找到与下面这样的复选框相对应的select2框时,.val()
函数总是返回空字符串。
$(".cb:checked").each(function() {
var cb = $(this);
if (cb.closest('tr').find('.bulk_relationship_dropdown').val() == "") {
console.log("here"); //do something
}
})
我做错了什么?
我正在使用select2 3.5.2
select2将input
上的类复制为它生成的非表单控件结构的一部分。生成的结构(当前为span
)将是find
返回的jQuery集合中的第一个结构,而val
只尝试读取集合中的第1个元素,因此将返回undefined
。只需将input
添加到选择器中,就可以找到输入(select2隐藏但保持最新):
cb.closest("tr").find("input.bulk_relationship_dropdown")
// --------------------^^^^^
更新片段:
var value = [{
id: 0,
text: 'enhancement'
}, {
id: 1,
text: 'bug'
}, {
id: 2,
text: 'duplicate'
}, {
id: 3,
text: 'invalid'
}, {
id: 4,
text: 'wontfix'
}]
$(document).ready(function() {
$(".bulk_relationship_dropdown").select2({
data: value
})
$("#submit").click(function() {
jQuery("input.bulk_relationship_dropdown").each(function() {
if (jQuery(this).val() != "") {
console.log(jQuery(this).val());
}
})
$(".cb:checked").each(function() {
var cb = $(this);
if (cb.closest('tr').find('input.bulk_relationship_dropdown').val() == "") {
console.log("here"); //do something
}
})
});
});
.select2-container {
margin-top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" rel="stylesheet" />
<br>
<table>
<tr>
<td>
<input type="checkbox" class="cb">
</td>
<td>some random text</td>
<td>
<input type="text" style="width: 120px" class="bulk_relationship_dropdown">
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="cb">
</td>
<td>some random text</td>
<td>
<input type="text" style="width: 120px" class="bulk_relationship_dropdown">
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="cb">
</td>
<td>some random text</td>
<td>
<input type="text" style="width: 120px" class="bulk_relationship_dropdown">
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="cb">
</td>
<td>some random text</td>
<td>
<input type="text" style="width: 120px" class="bulk_relationship_dropdown">
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="cb">
</td>
<td>some random text</td>
<td>
<input type="text" style="width: 120px" class="bulk_relationship_dropdown">
</td>
</tr>
</table>
<button id="submit">submit</button>
相关文章:
- 当使用'最接近的':jQuery
- JQuery获取最接近的元素并筛选子元素
- jquery onclick 切换最接近的 UL
- jQuery此语法或最接近的语法
- jQuery:在更改时获取最接近的元素
- Javascript/Jquery-以最接近的相关块为目标,显示类似卡片流中的内容
- 最接近的jquery
- 使用最接近查找文本输入的JQuery问题
- jQuery检索最接近唯一选择器的内容
- 显示与img最接近的li的JQuery Filter
- JQuery 最接近属性返回未定义
- jQuery最接近的在IE8 / 9中不起作用
- JQuery 最接近的元素,来自 GridView 中的文本框
- Jquery最接近不起作用
- Jquery最接近而find没有'似乎不起作用
- jQuery最接近(当元素有多个类时最接近hasClass)
- jQuery最接近类选择器
- jQuery最接近li的类不起作用
- jQuery最接近的不返回任何东西/没有找到禁用的输入
- 查找表行使用jquery最接近的方法不工作