title: Change element text and data-value using jQuery?
body: <p>I'm building a dropdown menu, and I want to select any of the lis from the parent element of ul when clicked.  Then, take that text and change the "Work Inquiry" (text of #subject) text w/ selected menu item text.</p>
  
  <p>I have comments explaining my predicament on the fiddle.</p>
  
  <p>Here is the jsFiddle :: <a href="http://jsfiddle.net/8m4Tj/" rel="nofollow">http://jsfiddle.net/8m4Tj/</a></p>
  
  <pre><code>$("ul#subjects &gt; li").on("click", function () {
    $("#subjects").slideUp(210);
    var liText = $(this).text();
    var newSubjectText = $("#subject").text();
    alert(liText); // this alerts selected item... how do you change #subject.text ???
    alert(newSubjectText); // stays the same
  });  
  </code></pre>
  
  <p>I don't know if im selecting the wrong item, but I want to replace the data-value and the actual text value.  I'm doing this method since there are no easy ways of styling the <code>&lt;select&gt;</code> element.</p>