Onclick select menu url redirect

Onclick select menu url redirect

In my mobile theme that I'm working on, I have a list of replies to an article. Next to each reply is a button that one can click (or touch) to view a select menu for options to reply, report, remove etc. assuming they have permissions. My problem is for the option to remove I want a JavaScript confirm() to give the user the option to proceed so that there isn't anyone getting mad for accidentally removing a reply. :) I cannot figure out how to get the value(the url) of the selected option. Here's the source code of the page that I'm working on.

  2. <ul data-role="listview" data-inset="true">
  3. <li data-role="list-divider">
  4. <div class="avatar">
  5. <img src="http://localhost/siteavatars/Actors/Bruce_Willis.jpg" alt="" />
  6. </div>
  7. <h4>title for first post in topic</h4> 
  8. <p>by <a class="postedby" href="http://localhost/siteindex.php?action=profile;u=1">Itchme</a> -- July 10, 2012, 04:18:35 pm</p>
  9. <span style="position: absolute; right: 10px; top: 10px">
  10. <select id="post_options" name="post_options" class="post_options" data-icon="gear" data-iconpos="notext" data-select-menu="true" data-native-menu="false">
  11. <option>Post Options</option>
  12. <option value="http://localhost/siteindex.php?action=post;topic=3.0;num_replies=1">Reply</option>
  13. <option value="http://localhost/siteindex.php?action=post;msg=4;topic=3.0">Modify</a></option>
  14. <option value="http://localhost/siteindex.php?action=deletemsg;topic=3.0;msg=4;fcf524d3=66cb49192a102ee7ea35de6534b10ab4">Remove</option>
  15. <option value="http://localhost/siteindex.php?action=reporttm;topic=3.0;msg=4">Report to moderator</option>
  16. </select>
  17. </span>
  18. </li>
  19. <li><div class="message_body">Body of first post in topic</div></li>
  20. <a id="msg5"></a>
  21. <li data-role="list-divider">
  22. <div class="avatar">
  23. <img src="http://localhost/siteavatars/Actors/Bruce_Willis.jpg" alt="" />
  24. </div>
  25. <h4>title for second post in topic</h4> 
  26. <p>by <a class="postedby" href="http://localhost/siteindex.php?action=profile;u=1">Itchme</a> -- July 10, 2012, 04:19:32 pm</p>
  27. <span style="position: absolute; right: 10px; top: 10px">
  28. <select id="post_options" name="post_options" class="post_options" data-icon="gear" data-iconpos="notext" data-select-menu="true" data-native-menu="false">
  29. <option>Post Options</option>
  30. <option value="http://localhost/siteindex.php?action=post;topic=3.0;num_replies=1">Reply</option>
  31. <option value="http://localhost/siteindex.php?action=post;msg=5;topic=3.0">Modify</a></option>
  32. <option value="http://localhost/siteindex.php?action=deletemsg;topic=3.0;msg=5;fcf524d3=66cb49192a102ee7ea35de6534b10ab4">Remove</option>
  33. <option value="http://localhost/siteindex.php?action=reporttm;topic=3.1;msg=5">Report to moderator</option>
  34. </select>
  35. </span>
  36. </li>
  37. <li><div class="message_body">Body message of second post.</div></li>
  38. </ul>

What I want to do is to redirect them to the url of the value="" in the selected option. BUT, if the remove option is selected, I need a confirmation box to popup and ask them first. Here's some pseudo code to see what I'm saying.

  2. <script>
  3. $(document).ready(function() {
  4. $("#post_options").onclick(function(){
  5. var text = the text of the selected option. (remove, modify, reply, report);
  6. var url = the url that is set in the value="" attribute of the select option tag.
  7. });

  9. if(text == "Remove") {
  10. if(confirm("Remove this message?")) {
  11. if (url) {
  12. window.location = url;
  13. }
  14. } 
  15. return false;
  16. } 
  17. else {
  18. if (url) {
  19. window.location = url;
  20. }
  21. return false;
  22. }
  23. });
  24. </script>

The part I can't figure out is how to get both the text, and the URL from the select menu. Since jquerymobile completely changes things behind the scenes, I can't quite figure it out. Any help would be greatly appreciated.

Itchme