I want to change the dropdown.selectedIndex to "text" instead of what it currently is "value"

Question

I have a javascript dropdown on website, here is the code-

           <?php
                function get_request_uri_without_page() {
                    $pageURL = 'http';
                 if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
                 $pageURL .= "://";
                 if ($_SERVER["SERVER_PORT"] != "80") {
                  $pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
                 } else {
                  $pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
                 }
                    $request = explode('/page/',$pageURL);
                    $request = explode('?', $request[0]);
                    return $request[0];
                }
            ?>
            <form action="<?php echo get_request_uri_without_page(); ?>" method="get" id="catselect" class="form-archive-140">
                                        <!-- DROP DOWN HERE -->
                <?php global $jtCatId; $jtCatId = true; wp_dropdown_categories('show_count=1&hierarchical=1&child_of=140&class=selectmenu&id=cat&show_option_none=Please Choose...'); ?>
                <script type="text/javascript">
                   <!--
                    var dropdown = document.getElementById("cat");
                    function onCatChange() {
                        if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
                            location.href = "<?php echo get_request_uri_without_page(); ?>?cat="+dropdown.options[dropdown.selectedIndex].value;
                        }
                    }
                    dropdown.onchange = onCatChange;
                    -->
                </script>

The output of this dropdown is a list of posts filtered by location, however the URL structure is as follows-

thewebsite/themaincategory?cat=141

I would like to replace the category id at the end with the category name, when I replace dropdown.selectedIndex to "text" the dropdown does not work, it doesn't give an error it just doesn't do anything.

Do I need to do a rewrite in the htaccess or is their a way to get the above code working.

I would like to apologise in advance if this is a stupid question, I am new to javascript and just trying to find my way.

Here is a working example of the above mentioned-

http://www.theweddingdirectory.co.za/professional-wedding-photographers

Answer 1

try something like this

  var cat= document.getElementById("cat");
  var text = cat.options[cat.selectedIndex].text;

EDITED CODE

        function onCatChange() {
             if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
                 location.href = "<?php echo get_request_uri_without_page(); ?>?cat="+dropdown.options[dropdown.selectedIndex].text.trim();
             }
         }