Wordpress Jquery Function Not Working: Selection List Function Not Working Properly in Wordpress Website.

Lots of questions here
1. You go to all the trouble of including jQuery and defining a .ready() function and then use plain getElementById to access your elements?
2. In your test code you have the line

<p>Select the top list and the second list should populate with the corresponding related values.</p>

Suggesting that select 2 should change and only show items relating to select 1 - instead it just selects the first item that pertains to the first.
3. Not sure what the snippet is meant to achieve - doesn't appear to do anything - but I would have expected it to be linked to an onchange on the first.
4. You are setting an id on each of your options - not sure why?

What you probably want is dynamically assigned dropdowns where 2 populates based on the value of 1
Something like this
HTML
Options here - either put a -- SELECT MAKE -- and -- SELECT MODEL -- as default items - or make the second default to only the Honda items as that will be the default on load

<select id="ptb_testbox_temp_make">
<option id="1">Honda</option>
<option id="2">Ford</option>
<option id="3">Toyota</option>
</select>

&nbsp;

<select id="ptb_testbox_temp_model">
<option id="8">Honda Civic</option>
<option id="9">Honda CRV</option>
<option id="10">Honda Prelude</option>
<option id="11">Honda Pilot</option>
</select>

Select all Open in new window

jQuery

<script>
jQuery(function($) {
var models = {
 Honda: {
    8: 'Honda Civic',
    9: 'Honda CRV',
    10: 'Honda Prelude',
    11: 'Honda Pilot'
  },
 Ford: {
    4: 'Ford Mustang',
    5: 'Ford Fiesta',
    6: 'Ford F-150',
    7: 'Ford Escort'
    },
 Toyota: {
    12: 'Toyota Prius',
    13: 'Toyota RAV',
    14: 'Toyota Corolla',
    }
};
  jQuery( "#ptb_testbox_temp_make" ).change(function () {
    var val = $(this).val();
    jQuery('#ptb_testbox_temp_model').empty();
    for(var i in models[val]) {
      jQuery('#ptb_testbox_temp_model').append(
        jQuery('<option/>').html(models[val][i]).val(i)
      );
    }
  });
});
</script>

Select all Open in new window

Note we have a data structure that breaks the options down by first option. We then use the value of the first select to populate the second.

You can see your example working here
There is another sample you can look at here

Now looking at your WordPress site you have this

<select data-placeholder="Show All Make" name="make" id="ptb_testbox_temp_make">
  <option value="">Show All Make</option>
  <option  value="make_1">Ford</option>
  <option  value="make_2">Honda</option>
  <option  value="make_3">Toyota</option>
</select>
<select data-placeholder="Show All Model" name="model" id="ptb_testbox_temp_model">
  <option value="">Show All Model</option>
  <option  value="model_1">Honda Accord</option>
  <option  value="model_2">Honda Civic</option>
  <option  value="model_3">Honda Prelude</option>
  <option  value="model_4">Ford Mustang</option>
  <option  value="model_5">Ford Festiva</option>
  <option  value="model_6">Ford Festiva</option>
  <option  value="model_7">Toyota Prius</option>
  <option  value="model_8">Toyota Rav4</option>
  <option  value="model_9">Toyota Corolla</option>
</select>

Select all Open in new window

What do you notice about this select compared to yours?
1. No id's
2. value attributes

In your HTML sample - the value will default to the label because you did not define a value
In the Word Press sample this is not the case.

So if you are going to use the sample above you will have to change the models array to use the values in the selects rather than the sample values.

leakim971, you are the man sir! If I knew where you were I would by you beer, nay I would buy you a KEG of Beer + Plus 2 Six Packs! I cannot thank you enough! This works perfectly. And to the powers that be at Experts Exchange - you just made me a lifetime member.