使用 Jade 的下拉项中的可点击链接
Clickable links in drop-down items using Jade
我正在使用 Node.js、Jade 和 Node 包 XLSX(针对 Excel)创建一个简单的下拉菜单,该菜单使用 Excel 中的 sheet 个名称] 文档作为下拉菜单的字段。例如,如果不同的 sheet 名称是一年中的所有月份,我希望所有这些月份都是菜单中的可点击链接。
到目前为止,我已经能够将 Excel 文件中的 sheet 名称放入下拉菜单中,但我不确定如何使它们成为所有可点击的链接。
index.js
router.get('/', function(req, res, next) {
var workbook = xlsx.readFile('C:/Users/user/Desktop/1234.xlsx');
var listStuff = [];
_.each(workbook.SheetNames, function(value, key, collection) {
listStuff.push(value);
// console.log(value);
})
index.jade
select
each val in listStuff
option=val
a(href='https://www.google.ca')=val /*need to fix this line so that all the values are links instead of just being a static drop down menu */
我一开始没意识到您使用的是 select 元素。为了将 link 应用于 select 元素,您必须使用 javascript。这样的东西应该可以工作。
select(id="foo", name="xxxyyy")
-for(var i = 1;i<10;i++){
option(value="https://www.google.ca") Some value for #{i}
-}
script.
document.getElementById("foo").onchange = function() {
if (this.selectedIndex!==0) {
window.location.href = this.value;
}
};
Codepen 不允许 links 但如果你去这里 http://codepen.io/chrislewispac/pen/epvgGb
然后打开控制台,您会看到它正在 linking.
对于您的comment/question,下面是您需要的确切代码:
更新的 CodePen:
http://codepen.io/chrislewispac/pen/epvgGb
- var listStuff = ['thing','thing2','thing3']
select(id="foo", name="xxxyyy")
each val, i in listStuff
option(value="https://www.google.ca") Value is: #{val}
script.
document.getElementById("foo").onchange = function() {
if (this.selectedIndex!==0) {
window.location.href = this.value;
}
};
请注意,您不需要在代码中将 var listStuff 声明为数组,因为您已经从服务器获得了它。
我正在使用 Node.js、Jade 和 Node 包 XLSX(针对 Excel)创建一个简单的下拉菜单,该菜单使用 Excel 中的 sheet 个名称] 文档作为下拉菜单的字段。例如,如果不同的 sheet 名称是一年中的所有月份,我希望所有这些月份都是菜单中的可点击链接。
到目前为止,我已经能够将 Excel 文件中的 sheet 名称放入下拉菜单中,但我不确定如何使它们成为所有可点击的链接。
index.js
router.get('/', function(req, res, next) {
var workbook = xlsx.readFile('C:/Users/user/Desktop/1234.xlsx');
var listStuff = [];
_.each(workbook.SheetNames, function(value, key, collection) {
listStuff.push(value);
// console.log(value);
})
index.jade
select
each val in listStuff
option=val
a(href='https://www.google.ca')=val /*need to fix this line so that all the values are links instead of just being a static drop down menu */
我一开始没意识到您使用的是 select 元素。为了将 link 应用于 select 元素,您必须使用 javascript。这样的东西应该可以工作。
select(id="foo", name="xxxyyy")
-for(var i = 1;i<10;i++){
option(value="https://www.google.ca") Some value for #{i}
-}
script.
document.getElementById("foo").onchange = function() {
if (this.selectedIndex!==0) {
window.location.href = this.value;
}
};
Codepen 不允许 links 但如果你去这里 http://codepen.io/chrislewispac/pen/epvgGb 然后打开控制台,您会看到它正在 linking.
对于您的comment/question,下面是您需要的确切代码:
更新的 CodePen: http://codepen.io/chrislewispac/pen/epvgGb
- var listStuff = ['thing','thing2','thing3']
select(id="foo", name="xxxyyy")
each val, i in listStuff
option(value="https://www.google.ca") Value is: #{val}
script.
document.getElementById("foo").onchange = function() {
if (this.selectedIndex!==0) {
window.location.href = this.value;
}
};
请注意,您不需要在代码中将 var listStuff 声明为数组,因为您已经从服务器获得了它。