表格选择下拉列表
Posted
技术标签:
【中文标题】表格选择下拉列表【英文标题】:Table to select dropdown 【发布时间】:2014-04-30 09:04:56 【问题描述】:不确定从哪里开始, 这是设计:
我有一个使用 drupal 中的视图动态填充的表。该表有一个语言列,以及一个指向文件的相应链接,该链接适用于节点上存在翻译的任何语言。
输出如下:
<table class="views-table cols-2">
<thead>
<tr>
<th class="views-field views-field-language views-align-left">Language</th>
<th class="views-field views-field-download views-align-right"></th>
</tr>
</thead>
<tbody>
<tr class="odd views-row-first">
<td class="views-field views-field-language views-align-left">English</td>
<td class="views-field views-field-download views-align-right"><a href="/file/26/download?token=c3e7cLRldQolkKcDvhceXCKuPJwhSpYMfObOxZZFBFY">Download</a></td>
</tr>
<tr class="even views-row-last">
<td class="views-field views-field-language views-align-left">Spanish</td>
<td class="views-field views-field-download views-align-right"><a href="/file/26/download?token=c3e7cLRldQolkKcDvhceXCKuPJwhSpYMfObOxZZFBFY">Download</a></td>
</tr>
</tbody>
</table>
从这里我想要一个列出语言的下拉列表,以及一个根据所选语言而变化的下载链接。任何人都可以使用 Jquery 或 javascript 解决方案?
我找到了以下SO主题有类似的请求,只有我的请求需要动态更新下载链接。
【问题讨论】:
我没有看到任何下拉菜单的尝试... 阅读我发布的链接,我想将表格转换为选择下拉列表 我不太明白“动态更新下载链接”部分。您的意思是在更改option
时更新内容?也许您正在寻找<select id="yourDropDown" onchange="doSth()">
?
i.imgur.com/uh0I6xN.png 设计如上,语言下拉改变下载按钮的路径
【参考方案1】:
先生,我将微调和样式留给您。
这是jsfiddle
var meta =
function updateDownLink ()
var selected = $(this).context.selectedOptions[0].text;
$('#download').attr('href', meta[selected]);
var select = $(document.createElement('select')).insertBefore($('.views-table tbody').hide());
select.change(updateDownLink);
$('.views-table tbody tr').each( function(r)
optionText = $(this)[0].cells[0].innerText;
meta[optionText] = $(this).find('a')[0].href.substr(7);
option = $(document.createElement('option')).appendTo(select).html(optionText)
)
var a = $(document.createElement('a')).insertAfter($('.views-table'));
$(a).attr('href', meta['English']).attr('id', 'download').text('Download');
【讨论】:
很好,我的开发伙伴帮助解决了一些问题。在选项文本中添加带有空格的随机字符 - 添加了以下代码来解决问题。 optionText = optionText.replace(/ /g,''); optionText = optionText.replace(/\W/g, '');以上是关于表格选择下拉列表的主要内容,如果未能解决你的问题,请参考以下文章