If you want to populate the form with JavaScript in this way, you'll need to take a slightly indirect approach.
One option is to create a hidden field that JavaScript can read to get the value of the $location variable, or you could make an ajax call to retrieve it.
Then, you can create a JavaScript function that will return the appropriate values based on the location. For example:
function get_tours(location){
var tours = {};
switch(location){
case 'Austin':
tours = { "City Center": {
"text": "City Center",
"value": "city_center"
}
};
break;
//etc...
}
return tours;
}
If you opt for the AJAX method, you'll need to call the tour option setting function when the AJAX request succeeds.
Once you have the tour information in your JavaScript variable, you can update the elements of the 'tour' element on the page that was initially generated by PHP like so:
function create_tour_options(tours){
var select = document.getElementById('tour');
for(var tour in tours){
var tour_option = document.createElement('option');
tour_option.value = tours[tour]['value'];
tour_option.text = tours[tour]['text'];
select.appendChild(tour_option);
}
// Creating a new select object and replacing the existing one may be more efficient than adding and removing individual options.
}
Alternatively, if using JavaScript is not mandatory, you could write a PHP function to achieve the same result and return the $options_tour variable. For example:
function get_tours($location='Austin'){
$tours = array();
switch ($location){
case 'Austin':
$tours = array( "text" => "City Center",
"value" => "city_center"
);
break;
//etc...
}
return $tours;
}
Using PHP might be preferable as the options will be generated during the initial page load and won't need to be inserted afterwards.
Additionally, I've provided examples using vanilla JavaScript since I'm unsure if you're using JQuery or not.