jQuery:根据另一个复选框设置选择框的值
jQuery: Setting value of select box based on another checkbox
我有以下场景。当我点击表中的一个值时,我试图将选择框的值设置为点击的值。但是,应该只设置那些选中复选框的选择框。
我试着使用:eq
,但找不出确切的方法。有办法做到这一点吗?
这是我的示例代码。
(在选择和复选框列之间可能还有其他列,这是一个更大问题的一部分,我创建的是一个示例)
var selectValues = ["-","somevalue1", "somevalue2", "somevalue3", "somevalue4", "somevalue5", "somevalue6", "somevalue7", "somevalue8", "somevalue9", "somevalue10"];
for (var i=0;i<selectValues.length;i++){
$('<option/>').val(i).html(selectValues[i]).appendTo('.selectbox');
}
$("#sample td").click(function() {
var clickedValue = $(this).text();
console.log(clickedValue);
$('.selectbox').val(clickedValue);
});
table {
border: 1px solid #ccc;
border-collapse: collapse;
}
#sample tr {
border: 1px solid #ccc;
}
td {
cursor: pointer;
border: 1px solid #ccc;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sample">
<table>
<thead>
<tr>
<td>something</td>
<td>something else</td>
</tr>
</thead>
<tbody>
<tr>
<td>somevalue1</td>
<td>somevalue2</td>
</tr>
<tr>
<td>somevalue3</td>
<td>somevalue4</td>
</tr>
<tr>
<td>somevalue5</td>
<td>somevalue6</td>
</tr>
<tr>
<td>somevalue7</td>
<td>somevalue8</td>
</tr>
<tr>
<td>somevalue9</td>
<td>somevalue10</td>
</tr>
</tbody>
</table>
</div>
<table>
<tr>
<td>
<input type="checkbox" class="checkbox">
</td>
<td>
<select class="selectbox"></select>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkbox">
</td>
<td>
<select class="selectbox"></select>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkbox">
</td>
<td>
<select class="selectbox"></select>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkbox">
</td>
<td>
<select class="selectbox"></select>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkbox">
</td>
<td>
<select class="selectbox"></select>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkbox">
</td>
<td>
<select class="selectbox"></select>
</td>
</tr>
</table>
var selectValues = ["-", "somevalue1", "somevalue2", "somevalue3", "somevalue4", "somevalue5", "somevalue6", "somevalue7", "somevalue8", "somevalue9", "somevalue10"];
$.each(selectValues, function (i, val) {
$('<option/>', {value: val, text: val}).appendTo('.selectbox');
});
$("#sample").on("click", "td", function() {
var clickedValue = $(this).text();
$("#target :checkbox:checked").closest("tr").find(".selectbox").val(clickedValue);
});
table {
border: 1px solid #ccc;
border-collapse: collapse;
float: left;
}
#sample tr {
border: 1px solid #ccc;
}
td {
cursor: pointer;
border: 1px solid #ccc;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sample">
<table>
<thead>
<tr><td>something</td><td>something else</td></tr>
</thead>
<tbody>
<tr><td>somevalue1</td><td>somevalue2</td></tr>
<tr><td>somevalue3</td><td>somevalue4</td></tr>
<tr><td>somevalue5</td><td>somevalue6</td></tr>
<tr><td>somevalue7</td><td>somevalue8</td></tr>
<tr><td>somevalue9</td><td>somevalue10</td></tr>
</tbody>
</table>
</div>
<table id="target">
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td><select class="selectbox"></select></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td><select class="selectbox"></select></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td><select class="selectbox"></select></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td><select class="selectbox"></select></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td><select class="selectbox"></select></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td><select class="selectbox"></select></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td><select class="selectbox"></select></td>
</tr>
</table>
相关文章:
- 如何根据另一选择中的选择设置一个选择中的文本
- jQuery为按钮选择设置活动类
- 根据两个下拉菜单的选择设置隐藏值
- Bootstrap/AngularJs:如何为导航类的活动选择设置粗体属性
- Ember选择设置内容绑定
- KnockoutJS可观测值为't通过选择设置
- 3 选项从数据库中删除更改时选择设置值
- 如何根据下拉框选择设置文本框值
- 挖空 + 选择2 -- 设置默认值
- jQuery 验证 - 根据用户选择设置条件规则
- 使用角度引导选择设置下拉列表的选定选项
- 运行流星如何选择设置文件
- Dojo选择设置值不能与动态生成的选项一起工作
- 如何根据引导项选择设置变量
- 多重选择设置导致angular出错
- 具体化选择设置动态选项问题
- 表单:选择设置img src
- 基于列表框选择设置列表项
- 根据先前选择标记中的选择设置选择标记的可见性
- 如何根据下拉选择设置单选按钮值