title: Define global variable in JQuery
body: <p>I'm not sure if I'm explaining this right, but here it goes ...</p>
  
  <p>I have a function that works in JQuery to assign the selected dropdown value to a variable and then pass the variable to a different part of the HTML when a confirmation button is clicked.</p>
  
  <p>Here's a stripped down version of the HTML</p>
  
  <pre><code>&lt;p id="t1"&gt;&lt;/p&gt; 
  &lt;select id="selectLevel"&gt;
     &lt;option value="1"&gt;1&lt;/option&gt;
     &lt;option value="2"&gt;2&lt;/option&gt;
     &lt;option value="3"&gt;3&lt;/option&gt;
     &lt;option value="4"&gt;4&lt;/option&gt;
     &lt;option value="5"&gt;5&lt;/option&gt;
     &lt;option value="6"&gt;6&lt;/option&gt;
     &lt;option value="7"&gt;7&lt;/option&gt;
     &lt;option value="8"&gt;8&lt;/option&gt;
     &lt;option value="9"&gt;9&lt;/option&gt;
     &lt;option value="10"&gt;10&lt;/option&gt;
     &lt;option value="11"&gt;11&lt;/option&gt;
     &lt;option value="12"&gt;12&lt;/option&gt;
     &lt;option value="13"&gt;13&lt;/option&gt;
     &lt;option value="14"&gt;14&lt;/option&gt;
     &lt;option value="15"&gt;15&lt;/option&gt;
     &lt;option value="16"&gt;16&lt;/option&gt;
     &lt;option value="17"&gt;17&lt;/option&gt;
     &lt;option value="18"&gt;18&lt;/option&gt;
     &lt;option value="19"&gt;19&lt;/option&gt;
     &lt;option value="20"&gt;20&lt;/option&gt;
  &lt;/select&gt;
  &lt;span class="btn" id="confirmLevel"&gt;Confirm&lt;/span&gt;
  </code></pre>
  
  <p>And here's the JQuery I used.</p>
  
  <pre><code>$(document).ready(function() {
      $('#confirmLevel').click(function() {
          var PClevel = $("#selectLevel option:selected").text();
          $('#t1').append('Level ' + PClevel); 
      });
  });
  </code></pre>
  
  <p>The problem is, if I later try to call the PCLevel variable for other functions, nothing happens. What am I missing here? Or would it be better to skip JQuery altogether and just use Javascript to do the same thing?</p>