Develop Reference

How to keep values of select throughout the session

I have a table and i am adding new rows dynamically. Everything is working fine except my select.
I am able to hold all the values of my field except the select field.
So it is something like this When the user fills the form and click on initiate button, he is directed to second screen which is verification screen where he can verify the details and if wants to modify anything he can click on modify button and he will be redirected to first screen.
So the problem is the values filled by the user is retained in all the field but the value of the drop-down is not retained and is showing default value 'Select'.
Also i am able to get the selected value in array from 2nd to 1st screen and also i am able to assign the value to it but still its not displaying on the screen .Here's how.
Code
document.getElementById('fldsearch'+temp).options[document.getElementById('fldsearch'+temp).selectedIndex].value = arrsearch[temp];
arrsearch[temp] is an array where the selected value is stored.
fldsearch is the <td id> of select field.
temp is the increasing number of <td id> since i am adding rows dynamically.
Please do let me know if you need anything else.Thanks

First you have to set all values to drop-down. If all values are bind to select then one of them can be set to default value. Take a look at below example. Also please find fiddle link in comments.
<select name="ddlTitles" id="ddlTitles">
<option value="">Select</option>
</select>
$(function() {
var titles = ["Mr.","Ms.","Mrs.","Miss."];
for(var i=0;i<titles.length;i++){
var titleElement = document.getElementById("ddlTitles");
var option = document.createElement("option");
option.text = titles[i]
option.value = titles[i]
titleElement.add(option);
}
//Set default value to Ms.
$("#ddlTitles").val("Ms.");
});

Save select values in an array and go through it

I have 6 select fields to select three different options ("Please Select..", "Yes" and "No"). I want to be able to know which values has been selected inside a group, each group of select is inside a div. I try using this:
$('#qqq').find('select').change(function () {
// alert($(this).val());
var option = $(this).val();
selectValues.push($(this).val());
But this only works when you change the value, and don´t storage the values, therefore if you go through the group in other order the results are different. For example if you start in the last select and then go in inverse order. Pushing the values into a variable, the values are saved but if you change twice is saved it twice in "selectValues"
My html is something like this:
<div class="mygroup">
<select id="aa">
<select id="bb">
<select id="cc">
</div>
The values of the select are generated in jQuery, therefore the values can be retrieve using --> this.val()
My question is how can I retrieve the values of a group and then go through it? I had though in save it in an array and then go through it, but I don't know if the array values are going to change when you change the select twice.
I want to know it, because if any of the select is "Yes", some below input fields should be required and if all of them are "No", those fields should be readonly.

Like this:
var curVals = {};
$('#qqq').find('select').each(function () {
curVals[$(this).prop('id')] = $(this).val();
});
or this:
var $selectedYes = $('#qqq').find('select').filter(function () {
return $(this).val().toLowerCase() === 'yes';
});
If any have 'Yes' then $selectedYes will be a jQuery object containing only those select element(s); if none are, it will be an empty jQuery object.

Angular, show selected option in textbox

I have a multiple columns table and showing their values in multiple controls by Angular JS. For example I am using Select/Option (multiple) to show column A, and I want to use another text box to show column B, based on select/option. Here is code:
Column A in Select (multiple):
<select multiple data-ng-model="selectedEmp" data-ng-options="o.emp for o in post.Emps" >
<option value="SampleValue">Samplevalue</option>
</select>
Column B in text box:
<input data-ng-model="selectedEmp.gender" type="text" style="width:60px;"> </input>
The thing is, when I am not using 'Multiple' in select control, the gender value (in same record) can be displayed in text box, but when using 'multiple', the text box is not showing selected current record.
Please help on how to implement this.
Thanks

When you are using select without using multiple, you are binding to a object. So your selectedEmp might be something like {"emp":1,"gender":"M"} (an object).
But when you use multiple select, you are binding to an array. So your selectedEmp might be something like :
[{"emp":1,"gender":"M"},{"emp":2,"gender":"F"}]. Notice the [].
So, in case of multiple, you also need to pass the index whose value you want to bind. But in this case, it seems like you want to have input's for multiple selected items from above select.
I would use something like this:
<input data-ng-model="s.gender" type="text" ng-repeat="s in selectedEmp" />

Populate dropdown 2 using dropdown1 in angularjs

My html :
<select ng-controller="category" ng-model="selectedTestAccount" ng-options="c.category for c in categories track by c.categoryID" ></select>
<select ng-controller="subcatgory" ng-model="selectedTestAccount1" ng-options="c.subcategory for c in subcategories track by c.subcategoryID"></select>
My json will look like:
json1:
category: "Restaurants"categoryID: "1"
json2:
category: "Restaurants"categoryID: "1"subcategory: "European"subcategoryID: "1"
category: "Restaurants"categoryID: "1"subcategory: "Food Carts"subcategoryID: "17"
i want two dropdowns to be created. One for first json which will display categories.
on selecting the first category i want subcategories to be listed from second json. How to make first dropdown as mandatory.
Can anyone helpme with this

So I have created you a plnker
The key is the $watch which looks at the selected value (ng-model) of the first list then changes the values for the second list based on that new value.
$scope.$watch('selectedCategory', function(newValue) {
for (var i = 0; i < $scope.subCategories.length; i++){
if ($scope.subCategories[i].name === newValue){
$scope.selectedSubCategoryValues = $scope.subCategories[i].values;
}
}
});

You just need to:
add the required attribute on the first select
put an empty <option></option> inside the select (otherwise the select has already a default option which satisfy the requirement)
Here's the example:
http://jsfiddle.net/n5568q6o/1/

You can use a watch to watch the first object. If that changes change the array for the second one.
This will change the options according to the options you want for that.

AngularJS checkbox ng-repeat and selected objects?

I am trying to do it in proper way with less pain, but i can't figure out how to deal with ng-model and binding it to the selected list etc and moreover i need to populate that list in later time and keep selected objects in it.
categories = [ { "name": "Sport", "id": "50d5ad" } , {"name": "General", "id": "678ffr" } ]
<span ng-repeat="category in categories">
<label class="checkbox" for="{{category.id}}">
<input type="checkbox" value="{{category.id}}" ng-model="??" ng-click="??" name="group" id="{{category.id}}" />
{{category.name}}
</label>
</span>
I have to override the categories each time the list is populated since it will be pulled out from a server.
So I guess I need to have arrays and the second one will hold the selected objects?
If I am right, how do I preselect checkboxes?
Do I need ng-click in order call custom function to store the selected object in the other array?
Do I need ng-model in checkbox And what for?
What is the proper-way with less pain?

I have to override the categories each time the list is populated
since it will be pull out form server. So i quess i need to have
arrays and the second one will hold the selected objects?
Yes, since it is a list you can/should use arrays. The information about the selected items/objects should be stored on your scope model (example below).
If I am right, how do I preselected checkboxes?
Save the ID's of the selected options/checkboxes on your model and let the ng-model do the rest.
Do I need ng-click in order call custom function to store the selected
object in the other array?
No, you don't need it, ng-model is enough.
Do i need ng-model in check box? And what for?
Yes, you need it. The ng-model is responsible for storing the selected options on your model and for making the ('pre-')selection automatic.
jsfiddle http://jsfiddle.net/bmleite/PQvQ2/