Develop Reference

Angular dual drop downs first drop down repopulate after second dropdown value selected

I have a page with two dropdowns. The first one populates a list of Categories the second populates a list of Services after a category is selected.
I have the First list populating correctly and the services list populates with the associated services. However, when I select the service desired from the services list, the Category list repopulates and looses the selected value.
An example is I choose from the Category list Account, the services list populates with two selections which is correct. Now when I select the service I want, the First list reverts back to the original state when loading the page.
This is the html
<select data-ng-model="vm.kioskCheckin.serviceId" data-ng-options="c.Name as c.Name for c in vm.categories"
ng-change="vm.getServicesBC()"
class="form-control input-lg" ng-required="true"
id="category">
<option value="">Choose Primary Reason for Visit</option>
</select>
<div class="v-Space10"></div>
<select id="servicesDropDown" data-ng-model="vm.kioskCheckin.serviceId"
data-ng-options="c.Name as c.Name for c in vm.servicesFiltered"
ng-change="vm.setValues()"
class="form-control input-lg invisible" ng-required="true">
<option value="">Select Service...</option>
</select>
Here is the code that populates the second dropdown (note when that page loads the second dropdown is hidden until the first dropdown has a selection)
vm.getServicesBC = function () {
var mySelectedCategory = $('#category').val().split("string:").pop();
vm.servicesFiltered = getServicesByCategory(mySelectedCategory);
vm.filteredServices = getServicesByCategory(vm.services);
vm.filteredServices = [];
$('#servicesDropDown').removeClass("invisible");
};
Any suggestions or poiinters to what I may be missing?

I realized I was using the same model which would over write or cause the Category drop down to repopulate.
Here is the new html
<div class="text-center" style="margin: 25px 0 50px;">
<select data-ng-model="vm.selectedCategory" data-ng-options="c.Name as c.Name for c in vm.categories"
ng-change="vm.getServicesBC()"
class="form-control input-lg" ng-required="true"
id="category">
<option value="">Choose Primary Reason for Visit</option>
</select>
<div class="v-Space10"></div>
<select id="servicesDropDown" data-ng-model="vm.kioskCheckin.serviceId"
data-ng-options="s.ServiceId as s.DisplayName for s in vm.filteredServices"
class="form-control input-lg invisible" ng-required="true">
<option value="">Select Service...</option>
</select>
The new js code is here
vm.getServicesBC = function () {
vm.filteredServices = getServicesByCategory(vm.selectedCategory);
$('#servicesDropDown').removeClass("invisible");
};

Populating HTML Select dropdown from a database in Meteor

I've not been able to find the correct answer on this so seeing if the stackOverflow crew can help. I know it seems like a common thing, but this example is a little different from what I've found whilst searching.
I have a meteor template that has a select dropdown in it with the relevant part as such:
{{#each phoneNumber}}
<li>
<input id="{{this._id}}" type="text" name="phoneNumberItem" placeholder="Phone number here" value="{{number}}">
<select id="{{this._id}}" name="type">
<!-- go through collection and see which is selected there, mark it as selected here so they match -->
<option selected="{{selectedOrNot}}" name="selection">Work</option>
<option selected="{{selectedOrNot}}" name="selection">Home</option>
<option selected="{{selectedOrNot}}" name="selection">Mobile</option>
<option selected="{{selectedOrNot}}" name="selection">Office</option>
<option selected="{{selectedOrNot}}" name="selection">Fax</option>
<option selected="{{selectedOrNot}}" name="selection">Other</option>
</select>
<input id="{{this._id}}" type="button" class="remove" value="X">
</li>
{{/each}}
The complete code for the helper that selectedOrNot is in is shown as such:
Template.addPhoneNumber.helpers({
//the full list of phone numbers in the collection, so we can loop through them in the template and draw them into the form
'phoneNumber': function() {
return newOrgPhoneNumbers.find();
},
//let's us choose which of the dropdown items are selected
'selectedOrNot': function(event){
var collectionType = newOrgPhoneNumbers.findOne(); //get the type from the collection (EG: Home, Mobile, Fax, etc)
var typeFormName = $('[name="selection"]').val(); //get the data from the form (EG: Home, Mobile, Fax, etc)
//When drawing the select dropdown, see if there's a match and return selected if so
if(collectionType.type === typeFormName){
console.log ('selected!');
return 'selected';
}
}
});
What I'm trying to do:
I have data stored in a collection called newOrgPhoneNumbers.
This data includes a "type" that has either "Home", "Mobile", "Work", etc in it.
When I draw the select dropdown in the template, I want the selected to be chosen for the option that matches the "type" in the newOrgPhoneNumbers collection. Note that there are multiple select dropdowns, one for each item in the data collection. So there may be say, 6 phone numbers in the form, each with its own ID taken from the collection it's drawn from.
For the purposes of this example, the collection data has "Home" as the "type", so I want it to draw with Home being selected in the select dropdown.
Now I can see what's wrong here. The typeFormName is taking the VALUE of the selector dropdown, which is always "Work" by default.
How can I rework this to make a match in my If condition and return a "selected" when I get a match? I think I need to retrieve a value from the template that matches the value in the collection but the selector dropdown doesn't have such a value (as it's always "work" when drawn).
I've spent about 5 hours today on this with various logic attempts so it's time to ask. Any help is greatly appreciated. Rob

Instead of this
//let's us choose which of the dropdown items are selected
'selectedOrNot': function(event){
var collectionType = newOrgPhoneNumbers.findOne(); //get the type from the collection (EG: Home, Mobile, Fax, etc)
var typeFormName = $('[name="selection"]').val(); //get the data from the form (EG: Home, Mobile, Fax, etc)
//When drawing the select dropdown, see if there's a match and return selected if so
if(collectionType.type === typeFormName){
console.log ('selected!');
return 'selected';
}
}
try this
//let's us choose which of the dropdown items are selected
'selectedOrNot': function(event){
var typeFormName = $('[name="selection"]').val(); //get the data from the form (EG: Home, Mobile, Fax, etc)
//When drawing the select dropdown, see if there's a match and return selected if so
if(this.type === typeFormName){
console.log ('selected!');
return 'selected';
}
}
make sure you're getting correct values for both by console.log
EDIT
try following code
{{#each phoneNumber}}
<li>
<input id="{{this._id}}" type="text" name="phoneNumberItem" placeholder="Phone number here" value="{{number}}">
<select id="{{this._id}}" name="type">
<!-- go through collection and see which is selected there, mark it as selected here so they match -->
<option value="Work">Work</option>
<option value="Home">Home</option>
<option value="Mobile">Mobile</option>
<option value="Office">Office</option>
<option value="Fax">Fax</option>
<option value="Other">Other</option>
</select>
{{setDropdownValue}}
<input id="{{this._id}}" type="button" class="remove" value="X">
</li>
{{/each}}
in the helpers
setDropdownValue: function(){
$("#"+this._id).val(this.type);
}

Huge thanks to #Sasikanth. This is what he's helped me with and it's provided in full below to help others / future reference.
Meteor Template:
{{#each phoneNumber}}
<li>
<input id="{{this._id}}" type="text" name="phoneNumberItem" placeholder="Phone number here" value="{{number}}">
<select id="sel_{{this._id}}" name="type">
<!-- go through collection and see which is selected there, mark it as selected here so they match -->
<option value="Work">Work</option>
<option value="Home">Home</option>
<option value="Mobile">Mobile</option>
<option value="Office">Office</option>
<option value="Fax">Fax</option>
<option value="Other">Other</option>
</select>
{{setDropdownValue}}
<input id="{{this._id}}" type="button" class="remove" value="X">
</li>
{{/each}}
Meteor Helper:
Template.addPhoneNumber.helpers({
//the full list of phone numbers in the collection, so we can loop through them in the template and draw them into the form
'phoneNumber': function() {
return newOrgPhoneNumbers.find();
},
//This will take the value of the database item's "type" field and send it back to the select html element.
//It's using the sel_ prefix to separate it from the other items with the same id in the template so they don't receive the data by accident.
'setDropdownValue': function(){
$("#sel_"+this._id).val(this.type);
}
});

AngularJS ng-model not setting correct value

I have a table and when clicking on a row I call this function:
$scope.updateRow = function(row) {
$scope.row = angular.copy(row);
}
$scope.row has a name attribute and I have a select menu that should display this name:
<select name="rowName" ng-model="row.name" required required-message="'A name must be selected '" class="sa-select">
<option value=""></option>
<option ng-repeat="name in names" value="{{name.fullName}}">{{name.fullName}}</option>
</select>
However when clicking the row it sets the option value in the select menu to
<option value="? string:test name ?"></option>
even though $scope.row.name = "test name"
The option value should look like:
<option value="test name">test name</option>
Seems to be a similar issue to this question: Angular adds strange options into select element when setting model value

<select name="rowName" ng-options="name.fullName as name.fullName for name in names" ng-model="row.name" required required-message="'A name must be selected '" class="sa-select">
Not tested tho, but you can read more here: https://docs.angularjs.org/api/ng/directive/ngOptions
And if you would want to add a default option it would look like this:
<select name="rowName" ng-options="name.fullName as name.fullName for name in names" ng-model="row.name" required required-message="'A name must be selected '" class="sa-select">
<option value="your value"> your text </option>
</select>

ng-Select Option set default value from list if value match using angularJS

I have html.
<select ng-model="user.role" class="form-control" name="role" >
<option value="">Select Role</option><option ng-repeat="role in roles" value="{{role.authority}}">{{role.authority}}</option> </select>
Now roles is a list and role.authority is string. i want to set default selected if role.authority==MYROLE then set to default, which is in role.authority.
How can i do

You have to assign the same value to select model inside controller, in your case it would be something like this
$scope.user.role = $scope.roles[0].authority
or with use of ngSelected
<option ng-repeat="role in roles" value="{{role.authority}}" ng-selected="role.authority == 'defaultValue'">{{role.authority}}</option>

Sending both the value and key of an option box as parameters?

I want to send both the value and key of the option box when I submit a form. I feel like this should be pretty simple, but I'm unsure how to do it. Below is a snippet from my form to demonstrate what I'm referencing:
<form name='form' onSubmit="return checkForm();" action="../servlet/AccountRequest">
<select name="type1">
<option value="1">Option A</option>
<option value="2">Option B</option>
</select>
<br/><input type="button" id="Submit" onclick="checkForm(this.form)" value="Request" />
<input type="reset" value="Cancel"/>
</form>
​
In a normal scenario, if I selected "Option A" in the drop-down box, I would want to send the value, or "1". However, I want to actually send the value AND key of the selection, in this case both "1" and "Option A".
In my case, I call a checkForm() JavaScript function that validates form input (there are other fields, like First Name, Last Name, Email Address, and Password), which then forwards the parameters to a Java class (AccountRequest). I'm sure there is a way to store the key as a variable when the "Request" button is clicked, I just don't know how.
Any help would be much appreciated!

You could play with a jSON representation of your data:
<select name="type1">
<option value="{'1':'Option A'}">Option A</option>
<option value="{'2':'Option B'}">Option B</option>
</select>

It might not be the approach you were expecting, but you could send the key/value pair as your value and parse it when you receive it server-side.
<select name="type1">
<option value="1,Option A">Option A</option>
<option value="2,Option B">Option B</option>
</select>

In HTML, this is impossible: the data contributed by a select element is defined to be the value attribute of the selected option, when present (otherwise the content of the selected option element).
In JavaScript, it would be pretty easy, once you have decided how the content (“key” in your description) should be passed. At the simplest, you could append the content to the value attribute, with some separator between the strings; then you would have to parse that server-side, but that would be simple too.
However, it is part of the very idea of option elements that the content is the visible string in the user interface, understandable to the user, and the value attribute is the machine-readable easily processable data. In good design, they are kept as separate, not combined; the server should only need the data from the value attribute; otherwise there is a design flaw that should be fixed.

You could add this code to get the text of your selected <option> tag in your checkform function:
var select = document.getElementsByName("type1")[0]; // get select element - simpler if it has an ID because you can use the getElementById method
var options = select.getElementsByTagName("option"); // get all option tags within the select
for (i = 0; i < options.length; i++) { // iterate through all option tags
if (options[i].value == select.value){ // if this option is selected
var key = options[i].innerHTML; // store key of selected option here
}
}
DEMO, which tells you the key that's selected

Use a compound value, then parse it out on the server:
<option value="1_A">Option A</option>

you can send the value with an input type hidden
1.-choose the default value:
<input type="hidden" id="theValue" name="type1Value" value="Option A"/>
2.-add onChange function to your select, which changes previous hidden value
<select id="type1" name="type1" onChange="updateValue()">
<option value="1">Option A</option>
<option value="2">Option B</option>
</select>
assuming you are using jQuery:
function updateValue(){
var value= $('#type1').find(":selected").text();
$('#theValue').val(value);
}
so the value of the select will be sent in type1Value variable, EASY!!

using React js
I want to get two values from the option at the same time
so, I use the Split method
var string = "0,1";
var array = string.split(",");
alert(array[0]);
I create a sting on option
const getKioskSelectedUsageType=(e)=>{
let sl = e.target.value
let array = sl.split(",")
console.log("check :- ",array[1] )
}
<select
id=""
className="form-control"
value={kioskSelect}
aria-label="kioskSelect"
name="kioskSelect"
title="kioskSelect"
onChange={(e) => getKioskSelectedUsageType(e)}
style={{ color: "#495057" }}
>
<option value="">Select Kiosk</option>
{kioskConfiData.map((item, i) => {
return (
<React.Fragment key={i}>
<option value={`${item.kioskid},${item.language}`}>
{item.location}
</option>
</React.Fragment>
);
})}
</select>