Develop Reference

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.

Chrome console script to select options in a drop down menu

I have a page with a lot of food items there are a few options for me to select for each food item. I want to sequentially select Order for everything on the menu. Is there a script to make this happen? Thanks!
<select class="form-control" onchange="setFlag(999$(this).val(),$('option:selected', this).html());"> </select>
<option value="Order"> Make this order </option>
<option value="Veto"> Veto this order </option>

HTML
<select id="sel">
<option value="Order"> Make this order </option>
<option value="Veto"> Veto this order </option>
</select>
JS
document.querySelector("#sel").value = "Veto" // selects 2nd option from dropdown

I would take a look at this answer https://stackoverflow.com/a/6068322/1115876
something like
$('[value="Order"]').prop('selected', true)
should work

Toggling ng-selected

I am trying to toggle ng-selected options in Angular, but am running into some difficulty. Here's what I'm trying:
<select ng-model="datacut.ages" multiple>
<option value="" disabled="disabled">Please Select</option>
<option value="0-15" ng-click="toggleSelect(datacut, '0-15')" ng-selected="datacut.ages.indexOf('0-15') !== -1">15 and Younger</option>
<option value="16-19" ng-selected="datacut.ages.indexOf('16-19') !== -1">16 - 19</option>
<option value="20-24" ng-selected="datacut.ages.indexOf('20-24') !== -1">20 - 24</option>
</select>
Controller:
$scope.toggleSelect = function(dc, str){
dc.ages.splice(dc.ages.indexOf(str), 1);
//e.currentTarget.selected = !e.currentTarget.selected;
};
The problem is that when I click on an option gets selected on mousedown, and on release gets unselected. The commented out code also does the same thing.
I feel like this should have a simple solution, but I can't really figure out an elegant solution.
Any help would be much appreciated.
Edit: For clarification - I need to be able to have nothing selected, so clicking a single selected element needs to unselect it. I also need to be able to select multiple options.

Your are using ng-model which does the magic for you. So ng-click and ng-selected is not necessary. See my working fiddle
<select ng-model="datacut.ages" multiple>
<option value="" disabled="disabled">Please Select</option>
<option ng-value="'0-15'">15 and Younger</option>
<option ng-value="'16-19'" >16 - 19</option>
<option ng-value="'20-24'" >20 - 24</option>
</select>

It looks like you want to remove the selected age from the ages model. Then you need to use the ng-change directive. And remove the ng-click or ng-selected. But leave the ng-model to access the value on the method that remove the selected item.
See my plunker
<select multiple name="ages" unseletable forbiden-opt="datacut.MIN_AGE" ng-model="datacut.chosenAge">
<option value="" disabled="disabled">Please Select</option>
<option ng-repeat="age in datacut.ages" value="{{age}}">
{{age}}
</option>
</select>
EDIT: This should be made in a directive because you need to update the option html to unselect the option.

Angular select and constants: how to select default option?

I've got a select element, like this:
<select id="fieldName"
class="form-control"
ng-model="condition.type">
<option value="{{constants.TYPE_SORT_BY_SENDER}}">
{{locale('Sender')}}
</option>
<option value="{{constants.TYPE_SORT_BY_RECIPIENT}}">
{{locale('Receiver')}}
</option>
<option value="{{constants.TYPE_SORT_BY_DATE}}">
{{locale('Date')}}
</option>
<option value="{{constants.TYPE_SORT_BY_ATTACHMENT}}">
{{locale('Has attachment')}}
</option>
<option value="{{constants.TYPE_SORT_BY_SUBJECT}}">
{{locale('Subject')}}
</option>
</select>
constants object is defined in $rootScope on $stateChangeStart event, so when I look on this element using firebug it looks ok.
But the problem is that this select is not selecting the correct option on page load: if I change a constant to the number it works fine.
I don't want to have any magic numbers in my template, but I can't get this select to work.
What should I do here?

Fetch select list value in javascript

I have the select list in the html page as follows:
<select onchange="storePolishType('/p/','b',this.value );" class="drop_down1">
<option value="12">Margin2–Sawed Margin </option>
<option value="13">Polished-Sawed Back Polished </option>
<option value="13">Polished-Steeled Back Polished </option>
<option value="13">Polished–All Polished </option>
<option selected="selected" value="11">Sawed-All Polished </option>
</select>
I want to pass value e.g. 11 and value between option tag e.g. "Sawed-All Polished" to the storePolishType javascript function. I don't know how to pass this two values.
please help me.

Basically, what you want is:
<select onchange="storePolishType(this.value,this.options[this.selectedIndex].text)" class="drop_down1">
this will pas the value (eg, 11) and the text (eg, "Sawed-All Polished ") to a function storePolishType
live example: http://jsfiddle.net/QFtPG/