We Keep Coding

How to make 2nd drop down list auto select value based on 1st drop down value

I have two drop down list, one for Client and Location. I would like the location drop down to auto select a value based on the selected Client option.
This is the script i came up with but the value is not being displayed on the location drop down.
function defaultLocation () {
var client2 = document.getElementById('clientList2');
if (client2.value == "Arm") {
document.getElementById('locationList2').value == "Cambridge";
}
}
As of now, I want the value to be auto selected when the Client option is chosen with no need to click a button.
UPDATE:
I would still like the user to be able to choose something else from the location list if the default option is not wanted? How would i do that as of right now, once "Arm" is selected, i can't change the location option

To assign value, you have to use assignment operator (=) not ==:
document.getElementById('locationList2').value = "Cambridge";
once "Arm" is selected, i can't change the location option
But I am unable to raise the issue in the following:
function defaultLocation () {
var client2 = document.getElementById('clientList2');
if (client2.value == "Arm") {
document.getElementById('locationList2').value = "Cambridge";
}
}
<select id="clientList2" onchange="defaultLocation()">
<option value="c1">Client 1</option>
<option value="Arm">Arm</option>
</select>
<select id="locationList2">
<option value="l1">Location 1</option>
<option value="Cambridge">Cambridge</option>
</select>

How do I get ng-select to update when scope is changed?

I have a table above a form, that when a row is selected it populates a form with data. That form has a select element. Upon the first row in the table being selected, the data populates correctly and the correct selected option is shown. On the second and subsequent selection the correct selected option is not shown. In chrome dev tools I can see the values update properly, but it is not visually shown.
What am I missing? How do I get that correct option to be visually shown?
<select name="updateCategory" ng-model="selectedPermission.permission.category_id">
<option value="{{cat.id}}" ng-selected="cat.selected" ng-repeat="cat in selectedPermission.permission_categories">
{{cat.name}}
</option>
</select>
Here is function in controller that is updating the scope.
$rootScope.$watch('toolBarSelectedValue',function(){
if($rootScope.toolBarSelectedValue >0){
Permissions.getItem($rootScope.toolBarSelectedValue).then(function(res){
var pc = res.data.permission_categories;
var p = res.data.permission;
angular.forEach(pc,function(v,k){
if(v.id == p.category_id){
pc[k].selected = true;
}else{
pc[k].selected = false;
}
});
$scope.selectedPermission = {"permission":p,"permission_categories":pc};
$scope.$apply();
});
}else if($rootScope.toolBarSelectedValue == 0 || $rootScope.toolBarSelectedValue == null){
$scope.selectedPermission = {};
}
});

I would use ng-options as opposed to <option...></option> you can then relate your selection to your ng-model easily. See docs for more info.
Something like:
<select name="updateCategory" ng-model="cat" ng-options="cat.id as cat.name for cat in selectedPermission.permission_categories">
</select>
bear in mind I am not sure of you data structure, but this should get you on your way.

Unable to Set Dropdown List in javascript

I have a page that is allowing a user to select a state, city, and department from a drop down. Each drop down is populated based on the selected value of the previous drop down. When the user make a selection, I store the value in a cookie. Then, I check the cookie when the page load/reload. The page is reloaded and the value looks fine; however, I am not able to set the value on the drop down box. I tried hard coded the value, but it still does not work. Did I miss something?
$(function () {
var checkState = checkCookie("SelectedState"); // get the state index that was saved in the cookie.
var cityDropdown = $('#CityName');
if (checkState != "" && checkState != null) {
var checkCityCookie = checkCookie("cityName"); // get the city index value
var newCity = checkCityCookie.replace("=", " ")
if (newCity == "") {
getCity(checkState); //populate the city drop down
}
if (newCity != null && newCity != "") {
$('#CityName').val(1); //Hard code value here and still not working.
var checkDepartment = checkCookie("SelectedDepartment");
if (checkDepartment != null && checkDepartment != "") {
getDepartment(newCity);
}
}
}
})
Updated 08/07/2014:
//This is a sample of the html file that is generated,
so there is a value 1. $('#CityName').val(1);
<select name="CityName" id="CityName" onchange="changeCityName()"><option value="">Choose School</option>
<option value="1">Miami</option>
<option value="2">West Palm</option>
</select>

if you have html like this:
<select id="ddl-my-cities">
<option value="1">City 1</option>
<option value="2">City 2</option>
<option value="3">City 3</option>
<option value="4">City 4</option>
</select>
current jQuery code should work:
$("#ddl-my-cities").val(3);
please, check your html. If it does not work for you, take a look to the console, probably you have an error.
if you have not errors in the console, please, provide your html or razor code and I will edit my answer.

Select and Deselect not working in IE9?

I have a dropdown <select> element to select states from the list of 50 states, I select the 1st value, save it, and show the value in DOM. I changed and select to the 5th value, saving it shows the value updates in DOM. Now back i am selecting the 2nd Value, and saving it. It's not saving the value in DOM and it's showing the previous selected 5th value. I Checked with different values, and found that, after selecting any higher index value, selecting back, lower values are not affecting in DOM, and hence i am not getting the correct values in POST.
This is the function i am calling on change.
function updateDOM(inputField) {
var elementId = inputField;
if (inputField.type == "select-one") {
var prev_select = inputField.selectedIndex;
$('#'+inputField.id+' option').each(
function() {
$(this).removeAttr('selected');
}
);
document.getElementById(elementId.id).selectedIndex = prev_select;
if (browserVersion == 9) {
document.getElementById(elementId.id)
.options[prev_select].setAttribute("selected","selected");
}
else {
document.getElementById(elementId.id)
.options[prev_select].setAttribute("selected","selected");
}
document.getElementById(elementId.id).value
= document.getElementById(elementId.id).options[prev_select].value;
}
The HTML
<select id="abc" name="abc" onchange="javascript:updateDOM(this);" class="required" >
<option name="" value="" title="null" selected ></option>
<option name="AK" value="Alaska" title="null" >Alaska</option>
<option name="AL" value="Alabama" title="null" >Alabama</option>
<option name="AR" value="Arkansas" title="null" >Arkansas</option>
<option name="AZ" value="Arizona" title="null" >Arizona</option>
</select>

First of all, why don't you use ":selected" selector of jQuery, which you are using anyway? Also, why are you using jQuery only once?
I would recommend doing it in jQuery-style (sorry, I'm not quite sure what you are trying to do exactly in your code):
http://jsfiddle.net/msLXt/1/
P.S. What is the difference between these conditions?
if (browserVersion == 9) {
document.getElementById(elementId.id)
.options[prev_select].setAttribute("selected","selected");
}
else {
document.getElementById(elementId.id)
.options[prev_select].setAttribute("selected","selected");
}

Check if dropdown's selected option is not the first with JavaScript

Below are the options that I have in my HTML code:
<label id="subn">
<select name="subs" id="subs">
<option value="nothing">Choose a Subject</option>
<option value="General Question">General Question</option>
<option value="MemberShip Area">MemberShip Area</option>
<option value="Others">Others</option>
</select>
</label>
I want to create JavaScript code that will check whether the user selected an option other than the first one.
Here is what I tried:
if (document.getElementsByTagName('option') == "nothing"){
document.getElementById("subn").innerHTML = "Subject is Required!";
document.getElementById("subs").focus();
return false;
}

You can check like this if nothing is the first option (usually the case in my experience):
if (document.getElementById('subs').selectedIndex == 0){
To still compare based on the value, do this:
var sel = document.getElementById('subs');
if (sel.options[sel.selectedIndex].value == 'nothing') {
You may want to change your markup so the label is beside, like this:
<select name="subs" id="subs"></select><label id="subn" for="subs"></label>
Otherwise this part: .innerHTML = "Subject is Required!"; will erase your <select> :)

This should do it:
var index = document.your_form_name.subs.selectedIndex;
var value = document.your_form_name.subs.options[index].value;
if (value === "nothing"){
// your further code here.........
}

document.getElementsByTagName('option') gives a collection of all option elements in the document and "nothing" is a string. Comparing a collection to a string is quite useless.
Also setting document.getElementById("subn").innerHTML = "Subject is Required!"; will delete the select element, so document.getElementById("subs") wouldn't find anything any more.
If you just need to know if anything is selected check the selectedIndex property of the select element:
if (document.getElementById("subs").selectedIndex <= 0) {
// nothing is selected
}
EDIT: Changed > 0 to <= 0. I would assume that it should be checked if the user didn't select anything, too.