0

Im currently working on a Jade/NodeJS application that does not respond to an onClick function for a select option control. You can see the index.jade in the following:

extends layout

block content
  .jumbotron 
    h1 JSON Attribute Changer              
  .row    
    .col-md-4
      h2 Select the document
      p Use this control to select which form you want to update:     
      select.Documents.btn.btn-default        
          a.dropdown-toggle(data-toggle="dropdown")
            | Documents
            span.caret
          ul.dropdown-menu(name="documentSelector")
            each document in documents             
              option(type="option", onClick='getAttributes()') #{document._id} 

The getAttributes() function is defined in the layout.jade file:

doctype html
html
  head
    meta(charset='utf-8')
    meta(name='viewport', content='width=device-width, initial-scale=1.0')
    title #{title} - Utilities
    link(rel='stylesheet', type='text/css', href='/stylesheets/bootstrap.min.css')
    link(rel='stylesheet', type='text/css', href='/stylesheets/style.css')
    script(src='/javascripts/modernizr-2.6.2.js')

    script.
      function getAttributes() {
        console.log('something')
      }

  body
    etc, etc, etc.

The select option controls are dynamically created from entries in a Mongo db (which works fine). How can I attach the onclick function to each select option control that is created. Also, as a bonus, how could I go about using the value of the select option thats selected to retrieve its full json document from Mongo for field population?

Any and all help is awesome!

EDIT:

I just changed the Javascript code in layout.jade to reflect the following:

script.
      $('#DocumentOptions').change(function() {
        var val = $("#DocumentOptions option:selected").text();
        alert(val);
      });

I also added an ID to the select control as follows:

  select.Documents.btn.btn-default#DocumentOptions        
      a.dropdown-toggle(data-toggle="dropdown")
        | Documents
        span.caret
      ul.dropdown-menu(name="documentSelector")
        each document in documents             
          option #{document._id}  

I am still not getting a response. I do not have any browser plugins running that block JS. Also, I have checked the browser console and Node console to no avail.

CodePull
  • 280
  • 1
  • 6
  • 20
  • Possible duplicate of [Click on option event](http://stackoverflow.com/questions/4670405/click-on-option-event) – tungd Sep 09 '16 at 17:17
  • I just tried the method used in the link but it didnt work. Here is my select control code: select.Documents.btn.btn-default#DocumentOptions a.dropdown-toggle(data-toggle="dropdown") | Documents span.caret ul.dropdown-menu(name="documentSelector") each document in documents option #{document._id} Here is the new javascript: $('#DocumentOptions').change(function() { var val = $("#DocumentOptions option:selected").text(); alert(val); }); – CodePull Sep 09 '16 at 19:22

0 Answers0