Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Clickable links in drop-down items using Jade

I am using Node.js, Jade and the Node package XLSX (for Excel) to create a simple drop down menu that takes the sheet names from an Excel document as the fields for the drop down menu. For example, if the different sheet names are all the months of the year, I want all those months to be clickable links in the menu.

So far I've been able to get the sheet names from an Excel file into a drop down menu, but I am not sure about how to make them all clickable links.

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  */
like image 990
Nicole Pinto Avatar asked Mar 27 '26 12:03

Nicole Pinto


1 Answers

I didn't realize you were using a select element at first. In order to apply a link to a select element you will have to use javascript. Something like this should work.

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 doesn't allow links but if you go here http://codepen.io/chrislewispac/pen/epvgGb and open up the console you will see it is linking.

For your comment/question below here is the exact code you need:

Updated 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;
    }        
};

Just be aware you do not need to declare var listStuff as an array in your code since you have it from your server.

like image 131
Chris L Avatar answered Mar 29 '26 03:03

Chris L