Develop Reference

Click dropdown option with javascript and have chained dropdown boxes change

So there are 2 dropdown boxes in a page, Country, and state / province. when a certain option is picked in the country dropdown box, it changes the values in the state dropdown box.
Here is the country dropdown:
<select class="select optional" name="order[billing_country]" id="order_billing_country" aria-invalid="false">
<option selected="selected" value="USA">USA</option>
<option value="CANADA">CANADA</option>
</select>
Here is the state dropdown with USA selected:
<select class="select optional" name="order[billing_state]" id="order_billing_state">
<option value=""></option>
<option value="IL">IL</option>
<option value="NY">NY</option>
</select>
Here is the state dropdown with CANADA selected:
<select class="select optional" name="order[billing_state]" id="order_billing_state">
<option value=""></option>
<option value="SK">SK</option>
<option value="YT">YT</option>
</select>
When i select an option in the country dropdown normally, it works and changes the values in the state dropdown, but when i use javascript to select a country dropdown option, it doesnt change the values in the state dropdown. Here is some of the code i have tried:
document.getElementById('order_billing_country').value = "CANADA"
and
document.getElementById("order_billing_country").selectedIndex = 1
Neither of those cause the state dropdown to update.
So i was wondering if it was possible to click an option in the country dropdown like a normal human would, or if there was another way to select an option in the country dropdown that would cause the states to be updated.
This was marked as duplicate to Chained Select Boxes (Country, State, City) in a different thread. I am asking a different question though, im not trying to make the state dropdown change based on country, it already does that (when i select a dropdown option as a human). Im trying to select a country dropdown option with javascript and still have the state dropdown values change as if i was selecting a country as a human.
EDIT:: Found two scripts in the page that have something to do with it: here they are:
<script id="states-USA" type="text/x-tmpl">
<option value=""></option>
<option value="IL">IL</option>
<option value="NY">NY</option>
</script>
and
<script id="states-CANADA" type="text/x-tmpl">
<option value=""></option>
<option value="SK">SK</option>
<option value="YT">YT</option>
</script>
If i change values in those scripts, it changes what appears in the state dropdown after selecting the country. I couldnt find anything that calls those scripts in the page. Is it possible to call those scripts from the chrome extension or something like that?...

How to enable certain options in a select when users chooses an option in other select?

I was wondering how something like this would work using pure JS or using jQuery (I think if possible through jQuery it would be done faster?). If I have a select drop down list and the user chooses an option, based on that option the next drop down list only has certain options enabled.
Example, I am attending an event in Ontario:
<select name="select_province_dropdown" id="select_province_dropdown" size="1" style="width: 183px;">
<option value="----Select Province----">----Select Province----</option>
<option value="AB">AB</option>
<option value="BC">BC</option>
<option value="MB">MB</option>
<option value="NL">NL</option>
<option value="NS">NS</option>
<option value="ON">ON</option>
<option value="PE">PE</option>
<option value="SK">SK</option>
</select>
<select name="venue_dropdown" id="venue_dropdown" size="1" style="width: 274px;">
<option value="----Select Venue----">----Select Venue----</option>
<option value="Toronto West">Toronto West</option>
<option value="Vancouver">Vancouver</option>
<option value="Edmonton">Edmonton</option>
<option value="Toronto East">Toronto East</option>
</select>
So using the above HTML, I would select "ON" for Ontario, and then only Toronto West and Toronto East should show or be enabled. The selected options do not need to be displayed in any other additional areas, the user just needs to make the selections and then move on in the form. My concern is if I have 300 events across the country that will be a long list to go through even with options disabled.
What I've tried: JSFiddle
The issue I see with what I've tried is that there will be a lot && statements...it works but when I have 30, 50, 100+ events I don't think it'll be ideal, also I don't know what to put in the else if I do use that.
---Background information---
A little background info as to WHY I want to try this incase anyone is wondering. I will eventually have up to 170-200 locations and I think it's easier for our users to select the correct venue by disabling options based on province. Originally I had created separate selects for the venues and then hid them all, and depending on which province you chose the select with the events associated with that province would reveal itself.
The js I have for that:
$('#select_province_dropdown').on('change', function() {
if ($("#select_province_dropdown").val() === "AB") {
$(".hideAB").attr("style", "display: block;");
} else {
$(".hideAB").attr("style", "display: none;");
}
});
Now the issue is that the CMS we're using limits the amount of custom fields we can build for our reports, and we have to pay (a lot) to increase that which is not in the budget at the moment. So while this method is simpler and easier for me to understand, I think the other method above that I am trying to figure out how to do is better cost wise because then we have only two custom fields (two selects) which saves the company money that I don't want them to spend just because I'm such a noob, I'd rather they pay for the additional custom fields for something more important.

Assuming you have the ability to add attributes to the venue dropdown, you can add a data attribute specifying which state the venue should be shown for.
Add some CSS that hides the disabled options and change the JavaScript to show only enable options that have the correct data attribute value.
Here is a demo https://jsfiddle.net/kf5tqdw2/6/
HTML
<select name="select_province_dropdown" id="select_province_dropdown" size="1" style="width: 183px;">
<option value="----Select Province----">----Select Province----</option>
<option value="AB">AB</option>
<option value="BC">BC</option>
<option value="MB">MB</option>
<option value="NL">NL</option>
<option value="NS">NS</option>
<option value="ON">ON</option>
<option value="PE">PE</option>
<option value="SK">SK</option>
</select>
<select name="venue_dropdown" id="venue_dropdown" size="1" style="width: 274px;">
<option value="----Select Venue----">----Select Venue----</option>
<option data-for="ON" value="Toronto West">Toronto West</option>
<option data-for="BC" value="Vancouver">Vancouver</option>
<option data-for="AB" value="Edmonton">Edmonton</option>
<option data-for="ON" value="Toronto East">Toronto East</option>
</select>
JavaScript
$('#select_province_dropdown').on('change', function() {
var state = $("#select_province_dropdown").val();
$("#venue_dropdown option").attr("disabled","disabled");
$("#venue_dropdown option[data-for='" + state + "']").removeAttr("disabled");
});
CSS
option[disabled] {
display: none;
}

You can use an 'onclick' function in each option.
<option onclick='show(this)' data-id1='AB' value="AB">AB</option>
Then your 'show function' would set the second menu with the option "id='whatever'" to
style='display:block'
where it was previously set to display:none
I hope this simple solution helps you out.

Set a class on all of your venue locations that matches the province they're located in:
<option class="ON" value="Toronto West">Toronto West</option>
When you select a province pull the value, disable all of the venues then re-enable only the venues that have a class matching the option value.

If I understand the requirement and constraints correctly, and building on #Josh Cronin's solution ...
You might consider showing/hiding #venue_dropdown options, rather than enabling/disabling.
The code is fairly straightforward ...
jQuery(function($) {
var $venue_dropdown = $('#venue_dropdown');
$('#select_province_dropdown').on('change', function() {
$venue_dropdown.get(0).selectedIndex = 0; // select the ----Select Venue---- option
$venue_dropdown.find('option')
.not(':first') // ignore the ----Select Venue---- option
.hide() // hide all venue options
.filter("[data-for='" + $(this).val() + "']") // select venues in the selected Province
.show(); // show selected venues
}).trigger('change'); // initialise #venue_dropdown in accordance with #select_province_dropdown's initial selection
});
DEMO
IMHO this will provide a better User Experience, especially if the list of venues is long.

Dynamically change text in php

hey guys i am building a form in which i want when a user select an option from the dropdown menus a text to be displayed and calculate the price.
The dropdown menu is:
<select id="recipient" name="recipient" tabindex="6" class="selmenu">
<option value="staff">Site Staff</option>
<option value="editor">Editor-in-Chief</option>
<option value="technical">Tech Department</option>
<option value="pr">Public Relations</option>
<option value="support">General Support</option>
</select>
and the other dropdown menu is:
<select id="recipient" name="recipient" tabindex="6" class="selmenu">
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
<option value="four">4</option>
<option value="five">5</option>
</select>
What i want to do is when the user selects something from the first and the second menu i want a textfield to change dynamically... can anyone point me the way?

only ajax/jquery could do that in combination of php step might be...
onchange of any dropdown make a ajax request to php script.
return the json response from php script
use this response to either manipulate your form or display data on page.

you don't need to use php for this, it can all be done with jquery/javscript
an example using jquery is below (i had to rename your second select as you had re-used an ID):
$('.selmenu').change(function() {
$('#output').text($('#recipient option:selected').text() + ' ' + $('#recipient2 option:selected').text());
})
output is the id of your textbox.
on a select value being changed, output will be filled with the selected value in both select controls

Setting HTML drop down list option

I am trying to set value from php the option selected in a drop down list in html.
can anyone tell me how to give the "selected" attribute as the answer is generated dynamically
<select form="onsite_assessment" class="form-control" id="onsite_assessment">
<option value="no">NO</option>
<option value="yes">YES</option>
</select>
In the above code if the user has selected No in the previous session. i want to display that option by default.

This is just some general code which can be shaped for your needs. As I can't see all your code I cannot give a FULL answer. Basically you need to store the users' choice and retrieve this in a variable whenever needed, either string or Boolean (true/false). In the example I will show this using a string.
<?php
$user_choice = 'yes';
?>
<select form="onsite_assessment" class="form-control" id="onside_assessment">
<option value="no" <?php if($user_choice == 'no'){echo 'selected'; }>NO</option>
<option value="yes" <?php if($user_choice == 'yes'){echo 'selected'; }>YES</option>
</select>

Dropdown auto select for page to page

How can I auto select from drop down.
Like where customer/reserve.php then click the dropdown and goes to customer/reserve_time&date.php
I'm comfortable using PHP if there's any tutorials can you link it to me
I search in Google but not a single one comes out.

I think you wants to redirect to another page whenever user changes dropdown value. So, you can do a javascript function call on dropdown change event.
<select name="dropdown" onchange="redirectPage(this.value);">
<option value="url1">Option A</option>
<option value="url2">Option B</option>
</select>
Your javascript function starts here:
<script type="text/javascript">
function redirectPage(value)
{
window.location.href = value;
}
</script>
Note: url1 and url2 are the link for the pages. Try This...

You need get in the second page the value selected for the user at the first page.
If you are using GET
$value = $_GET['param'];
If you are using POST
$value = $_POST['param'];
-
<select>
<option value="foo" <?php if($value=="foo") echo "selected"; ?>>bar</option>
<option value="foo1" <?php if($value=="foo1") echo "selected"; ?>>bar2</option>
</select>
UPDATE: Change page and pass parameter when select option.
<select onchange="window.location.href='other.php?value=' + this.value">
<option value="">-- Select one --</option>
<option value="men">Men</option>
<option value="woman">Woman</option>
</select>