Click dropdown option with javascript and have chained dropdown boxes change - javascript

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?...

Related

See which option was just selected in a multiselect

I have a multiselect bootstrap picker and would like to find the specific option that was just selected. For example, if I have the picker set to something like this:
<select class="form-select selectpicker" multiple aria-label="Default example">
<option value="Apple">Apple</option>
<option value="Cherry">Cherry</option>
<option value="Papaya">Papaya</option>
<option value="Kiwi">Kiwi</option>
</select>
When the user selects their first option, "Cherry", I would like to alert("Cherry"). When the user then selects their second option, "Apple", I would like to alert("Apple").
I have tried to use the option:selected:last value, but this only works to display the last option in the array of selected option. I would like to display the option that was most recently selected, regardless of its place in the array of selected options. Any insight is greatly appreciated.
EDIT: This questions was closed due to being marked as similar to the question found here: Get selected value in dropdown list using JavaScript
After looking through all of the provided answers in that link, I am not convinced that the questions are the same. I would like to get the most recently selected text in a multiselect picker, not the only selected option in a single select. So, if a user has both Apple and Papaya options selected, but selected the Apple option after selecting the Papaya option, I would like to alert("Apple"). Thanks.
Here Are Two Methods By which you can Use Alert.
First Method: With OnChange
<select class="form-select selectpicker" multiple aria-label="Default example" onchange = "alert(this.value)">
<option value="Apple">Apple</option>
<option value="Cherry">Cherry</option>
<option value="Papaya">Papaya</option>
<option value="Kiwi">Kiwi</option>
</select>
Second Method: Involves An Event Listener But Its Doing The Same Thing(Javascript)(Assuming That The ID of The Select Tag is selector
function change(){
alert(this.value)
}
document.getElementByID("selector").addEventListener("onchange",change)

drop down value should change to selected option and not default- angular

I have a select drop down. I have to show " select" as the default value. After selection an option, the value shown should be selected value.
<select #selectedPlanet
(change)='onOptionsSelected(selectedPlanet.value)'>
<option selected hidden>Select</option>
<option *ngFor='let planet of planetsList' [value]="planet.name">{{planet.name}}</option>
</select>
</div>
But now what happens is that, it shows "select" as default. But on selecting an option, the changed option changes to "select" in UI.Could anyone please help me
<select #selectedPlanet (change)='onOptionsSelected($event.target.value)'>
<option value="0" selected>Select</option>
<option *ngFor="let planet of planetsList let i=index" value="{{planet.name}}">{{planet.name}}</option>
</select>

Semantic UI Dropdown not selecting properly when a value and an option text are the same

When creating dropdowns with Semantic UI in a select tag. If the value of an option is the same as the text of a different option, the last option child will be the one selected. Regardless of the option that is selected.
HTML:
<select class="ui search dropdown">
<option value="">Please select</option>
<option value="a" selected>This is option A</option>
<option value="b">This is option B</option>
<option value="c">a</option>
<option value="d">This is option D</option>
</select>
JS:
$('.dropdown').dropdown();
The selected value should be a => "This is option A", but instead value c => "a" is selected.
I have tried different settings and options for the dropdown with no success. Am I missing something or is this a problem with Semantic UI?
Fiddle

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.

Javascript - Plugin should not affect all select boxes

I use a JQuery/Javascript plugin which changes select boxes with:
$('select').multipleSelect();
The select boxes look like:
<select multiple=\"multiple\">\r\n" +
<option selected=\"selected\" value=\"1\">January</option>
<option value=\"2\">December</option>
<option value=\"3\">December2</option>
</select>
The probem is that it changes all select boxes on the site but it should change one select box only.
How to do it?
Just give the select you want to select, a class, and then call the plugin on it
<select class="selectMe" multiple="multiple">
<option selected="selected" value="1">January</option>
<option value="2">December</option>
<option value="3">December2</option>
</select>
And then in jQuery
$('select.selectMe').multipleSelect();
You need not define an actual class in CSS, though you can, if you want. From now on, just add class selectMe to the <select> that you want the plugin to be called upon.

Categories

Resources