I have 2 boxes the first you select parent, second you select the child of a selected parent.
How do I run the function bellow after the second selection ?
angular function
$scope.myFunc = function() {
var jsonItem = JSON.parse($scope.formData.formatType.id);
sessionStorage.setItem('format', jsonItem);
}
HTML
<select ng-model="formData.ProductType.name" ng-change="productTypeChange()" ng-options="product.name as product.name for product in productsandformats">
<option value="">- Please Choose -</option>
</select>
<select ng-model="formData.formatType" ng-options="format.Fname for format in formats.format" ng-if="formData.ProductType.name">
<option value="">- Please Choose -</option>
</select>
Use ng-change
<select ng-model="formData.formatType"
ng-options="format.Fname for format in formats.format"
ng-if="formData.ProductType.name" ng-change="myFunc()">
<option value="">- Please Choose -</option>
</select>`
Related
I have the below select tag with two optgroup.
<select id="linkSelector" class="form-control" onchange="linkDropDown();">
<optgroup label="Input">
<option value="default">Road type</option>
<option value="lanes">Lanes</option>
<option value="length">Length</option>
<option value="speed">Speed</option>
</optgroup>
<optgroup label="Ouput">
<option value="congestion">Congestion</option>
<option value="speed_output">Speed</option>
<option value="travel_time">Travel Time</option>
</optgroup>
</select>
I would like to execute myFuncton() depending on the selected optgroup.
For example if one of the dropdown value belong to <optgroup label="Input">, then execute myFunction().
I tried this:
var linkSelector = document.getElementById('linkSelector')
opt = linkSelector.getElementsByTagName('optgroup')
if (opt[0].label =='Input'){
myFunction()
}
One way to go about this, would be to get the selected option for the select field, then find out it's parent's label.
var label = document.getElementById('linkSelector').selectedOptions[0].parentElement.label;
if (label === "Input") {
myFunction();
}
I want to always maintain how to select the second option for its drop downs. The point here is that the value is random:
MyBrowser.document.getElementById("multipleCat_1").Value = "RANDOMVALUE"
How do I select the second option in a drop down menu?
HTML:
<select id="multipleCat_1">
<option value="-1">Select</option>
<option value="RANDOMVALUE">Second Option"</option>
</select>
You can use selectedIndex as below:
document.querySelectorAll('#multipleCat_1 > option')[1].value = 'Got you!';
document.getElementById('multipleCat_1').selectedIndex = 1
console.log(document.getElementById('multipleCat_1').value)
<select id="multipleCat_1">
<option value="-1">Select</option>
<option value="RANDOMVALUE">Second Option"</option>
</select>
<select id="multipleCat_1">
<option value="A">AAA</option>
<option value="B">BBB</option>
<option value="C">CCC</option>
</select>
var options = document.querySelectorAll('#multipleCat_1 > option');
document.getElementById('multipleCat_1').value = options[1].value;
I have the following code wrapped in ng-repeat
<select class="selectpicker input input-halfwide">
<option disabled selected> -- Select your destination -- </option>
<option ng-repeat="(key, country) in home.List" value="key" ng-model="home.status.selectedOption">{{country.title}}
</option>
</select>
I want that when the user selects an option, to perform the expression home.doSomething() in the controller.
How can this be achieved?
You can do this with an ng-change on the select:
<select class="selectpicker input input-halfwide"
ng-model="home.status.selectedOption"
ng-change="home.doSomething()">
<option disabled selected> -- Select your destination -- </option>
<option ng-repeat="(key, country) in home.List" value="{{ key }}"
ng-selected="{{ key == home.status.selectedOption }}">
{{country.title}}
</option>
</select>
Also note that I moved the ng-model directive to the select instead of the option element.
A better practice would be to use the ng-options directive:
<select class="selectpicker input input-halfwide"
ng-model="home.status.selectedOption"
ng-change="home.doSomething()"
ng-options="country.id as country.name for country in home.List">
<option disabled selected> -- Select your destination -- </option>
</select>
you need to use ng-change to detect selection change and ng-model for the selected value on select.
<select class="selectpicker input input-halfwide" ng-change="home.doSomething()" ng-model="home.status.selectedOption">
<option disabled selected> -- Select your destination -- </option>
<option ng-repeat="(key, country) in home.List" value="key">{{country.title}}</option>
</select>
now, in your controller you can directly use the selected value using $scope
$scope.home.doSomething = function () {
// $scope.home.status.selectedOption
};
I would like to have a dynamic select option values bind to select dropdown.
<div ng-repeat="condition in conditions">
<div class="form-group">
<select ng-model="condition.Description" class="form-control">
<option value="">- Select -</option>
<option ng-value="{{age.Description}}" ng-repeat="age in ageConditions">{{age.Description}}</option>
</select>
</div>
</div>
I like
age in ageConditions
to be dynamic. I also tried ng-options="dynamicOptions" but it always bind to the same list.
I want to achieve this with ng-repeat.
Repeat 1:
<select ng-model="condition.Description" class="form-control">
<option value="">- Select -</option>
<option ng-value="ageCondition1">ageCondition1</option>
<option ng-value="ageCondition2">ageCondition2</option>
</select>
Repeat 2:
<select ng-model="condition.Description" class="form-control">
<option value="">- Select -</option>
<option ng-value="yearsCondition1">yearsCondition1</option>
<option ng-value="yearsCondition2">yearsCondition2</option>
</select>
As shown i want the option in select to be dynamic in ng-repeat.
Any idea?
<select ng-model="condition.Description" class="form-control">
<option value="">- Select -</option>
<option value="getValue(age, $parent.$index)" ng-repeat="age in ageConditions"> getText(age, $parent.index)</option>
</select>
Please note that $parent.$index is used.
the dynamic nature van be achieved used functions which return the value based in $index.
$scope.getValue = function(age, index) {
if(index === 1) return age.Desciption else age.years;
}
$scope.getText = function(age, index) {
if(index === 1) return age.Desciption else age.years;
}
hope this helps
Solved this by creating a directive that created a new scope for select.
I want to use this function to work on all my drop down lists. Problem: the first drop down works okay, but hen I try select any option in the 2nd drop down selections. It places the value from the first group in the span of the second group. I want the span to have the value from its own group. I would like to use this on multiple groups.
<script>function displayResult(xspan,xselect)
{
var x=document.getElementById(xselect).selectedIndex;
alert(x);
var newTxt = document.getElementsByTagName("option")[x].value;
document.getElementById(xspan).innerHTML = newTxt;
//alert(document.getElementsByTagName("option").length);
}
</script>
<select id="myPhones" onchange="displayResult('ShowPhone','myPhones')">
<option value="">Phone Numbers</option>
<optgroup label="Shipping">
<option value=" - 800-463-3339">FedEx</option>
<option value=""></option>
</optgroup>
</select>
<span id="ShowPhone"></span>
<select id="myParts" onchange="displayResult('ShowParts','myParts')">
<option value="">Qik Parts list</option>
<optgroup label="BATT">
<option value="1">1</option>
<option value="2">1</option>
<option value="2">1</option>
<option value="2"><1/option>
</optgroup>
</select>
<span id="ShowParts"></span>
Chage the id and the displayResult of the second dropdown:
First dropdown:
<select id="myPhones" onchange="displayResult('ShowPhone','myPhones')">
Second dropdown:
<select id="NewNameID" onchange="displayResult('ShowPhone','NewNameID')">