title: How to make javascript function active in html
body: <p>This code came from <a href="http://jsfiddle.net/ejqngpn5/" rel="nofollow noreferrer">http://jsfiddle.net/ejqngpn5/</a> but I apparently am putting the javascript and html portions together incorrectly or am missing something else because it is not working as it did on-line. How is the javascript inserted into and the function invoked in html code? I use AJAX calls in my scripts but don't know to make these two code fragments work together. It should produce, onClick, a multiple check-box list in a drop down menu. Many thanks.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
      &lt;select size="5" name="lstStates" multiple="multiple" id="lstStates"&gt;
          &lt;option value="NJ"&gt;New Jersey&lt;/option&gt;
          &lt;option value="NY"&gt;New York&lt;/option&gt;
          &lt;option value="OH"&gt;Ohio&lt;/option&gt;
          &lt;option value="TX"&gt;Texas&lt;/option&gt;
          &lt;option value="PA"&gt;Pennsylvania&lt;/option&gt;
      &lt;/select&gt;   
  &lt;/body&gt;
  </code></pre>
  
  <p>JAVASCRIPT</p>
  
  <pre><code>$(function () { 
      $('#lstStates').multiselect({ 
          buttonText: function(options, select) {
              console.log(select[0].length);
              if (options.length === 0) {
                  return 'None selected';
              }
              if (options.length === select[0].length) {
                  return 'All selected ('+select[0].length+')';
              }
              else if (options.length &gt;= 4) {
                  return options.length + ' selected';
              }
              else {
                  var labels = [];
                  console.log(options);
                  options.each(function() {
                      labels.push($(this).val());
                  });
                  return labels.join(', ') + '';
              }
          }
  
      });
  });
  </code></pre>