列表视图中的文本框
textbox in a listview
我有一个ListView
,包含一个下拉,4个文本框和按钮。我希望显示第四个文本框(这是包装在一个跨度)只有当下拉框是ListView
的每一行的value=2
。
例如,我在ListView
中显示了5条记录,第二和第三条都是value=2
这是在我的document.ready
中,它预设并选择页面加载时下拉框的每个值。所以我试图显示ZipBox
当它这样做的时候,我觉得这将是最简单的,但我也愿意接受其他建议,因为显示框似乎不起作用。
$('.Existing').each(function() {
var select = $(this).attr('data');
$(this).val(select);
//this part doesn't work below
if(select=="2")
{
$('#zipBox').css({ 'visibility': 'visible' });
}
});
我还需要显示文本框,如果下拉选择被改变,见下面尝试了这个,但它只适用于第一个。例如,如果我改变第5条记录的值,它将使ZipBox
在第一行可见,而不是在第5行。
$('.Existing').change(function() {
if ($(this).val() == '2') {
$('#ZipBox').css({ 'visibility': 'visible' });
}
});
listview:
<asp:ListView runat="server" ID="ListView1">
<LayoutTemplate>
<table id="tablesorter" style="border: solid 1px black; width: 55%;">
<thead>
<tr>
<th>
<a href="#">Country</a>
</th>
<th>
<a href="#">Info.</a>
</th>
<th>
<a href="#">Action</a>
</th>
</tr>
</thead>
<tbody>
<tr id="itemPlaceholder" runat="server" />
</tbody>
<tfoot>
</tfoot>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td>
<select id="Existing" data="<%# Eval("Type").ToString()%>"
class="Existing" style="width: 90px">
<option value="0">USA</option>
<option value="1">CAN</option>
<option value="2">MEX</option>
</td>
<td>
<input size="4" type="text" id="city" value="<%# Eval("City")%>" />
<input size="4" type="text" id="state" value="<%# Eval("State")%>" />
<input size="4" type="text" id="Phone" value="<%# Eval("PhoneNbr")%>" />
<span id="ZipBox" style="visibility: hidden">
<input maxlength="5" size="5" type="text" id="zip" value="<%# Eval("ZIP")%>" />
</span>
</td>
<td>
<2 buttons here>
</td>
</tr>
</ItemTemplate>
</asp:ListView>
输入可以切换(与visibility
),所以跨度是不必要的,但要切换跨度或输入class
属性将需要代替id
(id应该是唯一的,所以使用#ZipBox
多个zip字段将不起作用)
在您的第一次通过(.each()
),这将设置zip可见性,我注释了将下拉菜单的值设置为data
属性的部分,因为这会中断检查value = 2
$('.Existing').each(function () {
var $this = $(this), // drop down
$thisRow = $this.closest('tr'), // the drop down's row
$thisZip = $thisRow.find('.zip'), // the zip textbox on the same row
$thisDataType = $this.attr('data'); // data attribute contains the type
//$(this).val(select); // type is being set to the value
if ($this.val() == 2) {
$thisZip.css({'visibility': 'visible'});
}
});
对于更改事件,您可以做几乎相同的事情,但添加了else {}
块,如果MEX
被选中,然后更改zip
将再次隐藏
$('.Existing').change(function () {
var $this = $(this), // the drop down that changed
$thisRow = $this.closest('tr'), // the drop down's row
$thisZip = $thisRow.find('.zip'); // the zip textbox on the same row
if ($this.val() == 2) {
$thisZip.css({'visibility': 'visible'});
} else {
$thisZip.css({'visibility': 'hidden'});
}
});
相关文章:
- 如何在MVC3中显示鼠标悬停在文本上的部分视图
- 在网格视图的自动刷新过程中,设置内部网格视图文本框的可见性
- jQuery Mobile Listview,里面有文本视图
- jquery专注于asp.net mvc部分视图中的一个文本框
- 如何在网格视图中验证asp.net文本框
- 在文本框focusout事件的局部视图中清除表数据
- JavaScript中的网格视图页脚行文本框
- 在客户端的编辑模式下,在同一单元格网格视图中选中复选框时禁用文本框
- 如何 - jQuery 切换文本视图
- Redactor文本编辑器– 在代码视图中重新缩进缩小的HTML
- 如何在嵌套网格视图中查看子网格的页脚模板文本框
- 使用转义键在余烬文本视图中取消操作
- 无法使用 AJAX 获取 url 的 StumbleOn 视图,因为它的 API 返回文本/纯文本
- 在视图中从文本区域加载内容
- 如何使用 Angular js 计算网格视图项模板文本框值的两个文本框值
- 如何在javascript中打印网格视图和文本框
- Android :在文本视图中使用 JavaScript
- 在钛合金调音器中设置视图和文本视图的 ID
- 自动完成文本视图谷歌放置 API 描述 -> place_id
- laravel自动完成文本视图