How to get selected value in drop down in angular js controller - javascript

In my application there is a drop down(combo box) am populating drop down value
using json array object.can anybody tell how to get selected value from drop down in angular js controller
Thanks

I would use ng-options and ng-model. Your HTML will look something like this:
<select ng-model="myColor" ng-options="color.name for color in colors"></select>
reference:
https://docs.angularjs.org/api/ng/directive/ngModel
https://docs.angularjs.org/api/ng/directive/ngOptions

Related

Not getting value for the selected items using EJS multi select dropdown Syncfusion

I am using multi select dropdown using ejs Syncfusion. I am not able to retrieve value for selected items. I need the items to do further filtering. Code for same is below
<ejs-multiselect id='multiselectelement' (ngModelChange)="OnChangeair($event)" [(ngModel)]="value" [dataSource]='assetData' [fields]='fields' ></ejs-multiselect>
Using the item i need to cascade another dropdown. Any help would be appreciated.

JQuery returning select dropdown list returning value instead of text

Concatenating the selected options of three dropdown lists using JQuery to then use as a lookup value in a JSON file.
It is concatenating, but it looks like it's returning the values rather than the text of the selected option?
I know that $("#yourdropdownid option:selected").text(); is an option, however the lists are produced by reading a JSON and then placing the outcome in an <Option value= > - will this still work?
FIDDLE
Any suggestions?
$('#bcr').val() will get the value or ID of the dropdown.
You can use $('#bcr option:selected').text() to get the value inside the dropdown ie the text

Angular Drop Down, Select by Index

I am retrieving an unordered list and binding to a drop down here, but on instantiation I want to be able to select the 0th item in the drop down. ng-init="selectedTreatment=treatments[0]" doesn't work, as the list is reordered in the view.
<select ng-model="selectedTreatment"
ng-options="option.TreatmentName for option in (treatments | orderBy : 'TreatmentName')">
</select>
Is there an Angular way to do this?
In tour controller set the select ng-model
$scope.selectedTreatment = treatments[0].TreatmentName
One solution was to order the data in the controller, the same way as it is ordered in the view. Then in the controller I injected the $filter into the controller and did:
$scope.selectedTreatment = $filter('orderBy')($scope.treatments, 'TreatmentName')[0];
This allowed me to utilise the orderBy filter in the controller. This fixed my problem, but seems like it doesn't offer full SOC. A way to do this neatly in the view doesn't seem to be possible.

Angularjs empty dropdown with ngModel

Hi in my controller I am assigning following value
Than in html dropdown I have,
<div n-repeat="a in area">
<select ng-options="" ng-model="area.location" ></select>
<div>
Basically I want to show dropdown and only have one value selected which is area.location.
I tried it with empty ng-options or no ng-options it doesn't work.
Due to the way same field works in other section I cant use span or input to show this value has to show in a dropdown.
Please let me know how I can show just on value from ng-model as selected in dropdown.
Thanks
There are a few issues on your code:
First, if you want the tag to repeat, you should put the ng-repeat directive on the tag.
Second, you shouldn't use both ng-repeat and ng-options, You'll just get a wrong result.
Third, when you use the ng-repeat at this form nh-repeat="a in area", the a is the single item. so write ng-model ="a.location" instead of area.location.
area is the array, which probably doesn't have the property "location"
Hope this is what you need:
<select ng-model="selectedArea" ng-options="a.location for a in area">
</select>

Chosen select an option by default with jQuery

I have one select box with options and I am using jQuery "Chosen" on a Zend View. This plugin is working fine.
Javascript:
$('#select_type').chosen();
My problem is I need to select one of the options when the page loads depending on what the value of type_id is. I tried this:
document.getElementById('select_type').value = '<?=$this->type_id?>';
This changes its value but the option is not selected in the JQuery chosen.
Any ideas?
EDIT: The option successfully changes by doing what I have mentioned above but it does not update/change the selected element in jQuery "chosen" plugin. My question is about updating the selected value for jQuery Chosen not the HTML SELECT (which I have done successfully). Here is a link to jQuery Chosen plugin
Update list with JS
After you run:
document.getElementById('select_type').value = '<?=$this->type_id?>';
For Chosen version 1 and above (newer)
You should call:
$('#select_type').trigger('chosen:updated');
Taken from the Chosen documentation:
Updating Chosen Dynamically
If you need to update the options in your select field and want Chosen to pick up the changes, you'll need to trigger the "chosen:updated" event on the field. Chosen will re-build itself based on the updated content.
$("#form_field").trigger("chosen:updated");
See the change log for the announcement of this API change.
For Chosen versions below 1 (older)
You should call:
$('#select_type').trigger('liszt:updated');
Taken from the Chosen documentation:
Updating Chosen Dynamically
If you need to update the options in your select field and want Chosen
to pick up the changes, you'll need to trigger the "liszt:updated"
event on the field. Chosen will re-build itself based on the updated
content.
jQuery Version: $("#form_field").trigger("liszt:updated");
Prototype Version: Event.fire($("form_field"), "liszt:updated");
Set the value before calling Chosen
Instead of doing this from JS why don't you just set the selected option in the HTML before calling the Chosen plugin with JavaScript? You are setting the value from a piece of PHP so I don't see why this couldn't be done.
You can just set the correct elements with the attribute selected like so:
<select name="teams[]" data-placeholder="Chose an option:"
class="chzn-select" multiple tabindex="6">
<option value=""></option>
<option selected="selected">Dallas Cowboys</option>
<option selected="selected">New York Giants</option>
<option>Philadelphia Eagles</option>
<option>Washington Redskins</option>
</select>
Chosen will take care to initialize itself and show the two pre-selected choices.
Try this:
$("#select_type").val(<?=$this->type_id?>).trigger('change');
$('#select_type').trigger('liszt:updated');
Try this:
$('#select_type').val('<?=$this->type_id;?>'); // Select the value before .chosen();
$('#select_type').chosen();
$('#select_type').val('<?=$this->type_id?>');
try it
Try the following:
$("#choen-presentacion").val(value.id_presentacion).trigger('chosen:updated')

Categories