Data not showing in select dropdown after value is set - javascript

the foundation of my code is that I am taking data from ag-grid and showing that data into select drop-down (inside a popup) when "Edit" button is clicked.
But the data is not showing in the select drop-down.
When I click Edit, "YES" or "NO" should show as already selected in the drop-down based on the data I get from the grid. The code I used is mentioned below:-
<!-- Alter Part -->
<div class="form-group row">
<label for="alter_part" class="col-sm-3 col-form-label">Alter Part</label>
<div class="col-sm-9">
<select id="alter_part" class="form-control" onchange="alternatefunc();" required>
<option value="1">YES</option>
<option value="0">NO</option>
</select>
</div>
</div>
<!-- Test Type -->
<div class="form-group row">
<label for="test_type" class="col-sm-3 col-form-label">Select Test Type</label>
<div class="col-sm-9">
<select id="test_type" class="form-control" required>
<option value="1">YES</option>
<option value="0">NO</option>
</select>
</div>
</div>
function getInitialData(params)
{
//Setting value using grid data
document.getElementById('alter_part').value = params.node.data[params.columnApi.getAllGridColumns()[3].colId];
document.getElementById('test_type').value = params.node.data[params.columnApi.getAllGridColumns()[7].colId];
}
I have verified that the select drop-down stores the value from grid,
var a = document.getElementById('test_type').value;
variable "a" here returns the correct value of the grid row.

Related

Populate dropdown list with selected value

Only the selected Brand is displayed when I wish to modify the form. All Brands will be loaded, however only the chosen Brand will be shown.
Part: 1
ViewData["ddlBrand"] = new SelectList(_iCommon.LoadddlBrand(), "GID", "Name");
Part: 2
ViewData["ddlBrand"] = new SelectList(_iCommon.LoadddlBrandByGID(vm.BrandGID), "GID", "Name");
return PartialView("_Edit", vm);
.chtml
<div class="form-group row">
<label asp-for="BrandGID" class="col-sm-3 col-form-label"></label>
<div class="col-sm-9">
<select asp-for="BrandGID" asp-items="#ViewBag.ddlBrand" id="BrandGID" class="form-control" style="width:100%;">
<option disabled selected>--- SELECT ---</option>
</select>
<span asp-validation-for="BrandGID" class="text-danger"></span>
</div>
</div>

Multiple Select dropdown with dynamic data in Angular

currently i'm working on a angular project and i'm facing some issue in creating multiple select dropdown with dynamic data.
I want the to acheive something like this. There will be one button which when clicked will add multiple select dropdown in the form and that select dropdown will have dynamic data fetched from api.
The above thing is already acheived but the problem that i'm facing is that all the dynamic select dropdown had same ng-model and same name, so when i'm selecting value for one select dropdown, the same value is getting selected for all the dynamic select dropdown.
Attaching the screenshot for referrence
Now when i select any single dropdown, all the value for other dropdown are getting selected as well.
I hope i'm able to explain as much as possbile.
The code i used to add multiple dropdown
<div class="pull-right"><button (click)="addNewRow()" class='btn btn-success'>Add New Subjects</button></div>
This html is added dynamically in the form
<div class="row" *ngFor="let ts of total_subjects; let i=index">
<div class="col-4">
<div class="mb-3">
<label class="form-label" for="Status">Select Subject</label>
<select class="form-select digits" id="subject_id" name="subject_id" [(ngModel)]="form.subject_id"
required
#subject_id="ngModel" (change)="getChapter(subject_id.value)">
<option value="">Select Subject</option>
<option *ngFor="let sub of subjectList" value="{{sub.subject_id}}">{{sub.name}}</option>
</select>
</div>
</div>
<div class="col-4">
<div class="mb-3">
<label class="form-label" for="Status">Select Chapters</label>
<select class="form-select digits" id="chapter_id" name="chapter_id" [(ngModel)]="form.chapter_id"
required
#chapter_id="ngModel" >
<option value="">Select Chapter</option>
<option *ngFor="let chap of chapterList" value="{{chap.subject_id}}">{{chap.name}}</option>
</select>
</div>
</div>
<div class="col-3">
<div class="mb-3">
<label class="form-label" for="questions">No of Questions</label>
<input class="form-control" id="questions" type="number" name="questions" [(ngModel)]="form.questions"
required
#questions="ngModel" />
</div>
</div>
<div class="col-1"><button (click)="removeRow(i)" class='btn btn-danger'>Remove</button></div>
</div>
Here is the component code i used
total_subjects:any = [{
subject:'',
chapter:'',
questions:''
}];
addNewRow(): void{
this.total_subjects.push({
subject:'',
chapter:'',
questions:''
});
}
I don't really like to work with ngmodel when it is something complex, but in any case, I would try to give them in runtime a different name to each row, based on the index.
If you had left a StackBlitz with your current code worling, I would have tried to change it in your code to prove that it works, but more or less it consists of something like this:
<div class="row" *ngFor="let ts of total_subjects; let i=index">
<div class="col-4 mb-3">
<label class="form-label" for="Status">Select Subject</label>
<select
class="form-select digits"
id="subject_id_{{i}}"
name="subject_id_{{i}}"
[(ngModel)]=`form.subject_id_${i}`
required
#subject_id_{{i}}="ngModel"
(change)=`getChapter(subject_id_${i}.value)`>
<option value="">Select Subject</option>
<option *ngFor="let sub of subjectList,let i2 as index" value="{{`sub.subject_id_${i2}}">{{sub.name}}</option>
</select>
</div>
Note that you will have to play with the sintaxis {{ index}} and ${index} (backtips), depending on the case...
I hope this idea helps you.

How to show or hide the data based on dropdown selection

In my angular application I have a dropdown list and below that some data is in div.
component.html
<select class="form-control" id="power" required>
<option value="" disabled selected>Select a category</option>
<option *ngFor="let category of categoryNames">{{ category }}</option>
</select>
<!--below code I have to show or hide-->
<div class="row">
<div class="col-sm-8">
<p>Slect Habits</p>
<h5 class="formxp">Slect Items</h5>
</div>
<div class="col-sm-4">
<p>Slect Habits</p>
<h5 class="formxp">Slect Items</h5>
</div>
</div>
So my requirement is when I click on any of the items from the dropdown list I have to show the div (after the dropdown in above code)
Can anyone help me regarding the same.
You can define a template variable (e.g. #mySelect) on the <select> element, then use it to determine the selected value: mySelect.value.
In case you need to display the div if the selected category equals to 'Habit', you can try the following:
<!-- #mySelect is declared on <select> element -->
<select class="form-control" id="power" required #mySelect>
<option value="" disabled selected>Select a category</option>
<option *ngFor="let category of categoryNames">{{ category }}</option>
</select>
<div class="row" *ngIf="mySelect.value === 'Habits'">
<div class="col-sm-8">
<p>Slect Habits</p>
<h5 class="formxp">Slect Items</h5>
</div>
<div class="col-sm-4">
<p>Slect Habits</p>
<h5 class="formxp">Slect Items</h5>
</div>
</div>
You can read more about the Angular Template Variable here:
https://angular.io/guide/template-reference-variables

First dropdown selection is not filtering second dropdown

I'm trying to filter dropdown based on selection of first dropdown, in my console log, everything is fine, but second dropdown allways showing all results, not filtered one, here is how I did it:
<!--Group-->
<div class="form-group">
<label class="control-label dash-control-label col-xs-3">GROUP:</label>
<div class="col-xs-9">
<select class="form-control" style="width: 100%;"
data-minimum-results-for-search="Infinity" name="articleGroups" required (change)="filterSubById(article.mainGroup.id)" [(ngModel)]="article.mainGroup">
<option disabled [ngValue]="null">-/-</option>
<option [ngValue]="group" *ngFor="let group of mainGroups">{{group.title}}</option>
</select>
</div>
</div>
<!--Subgroup-->
<div class="form-group">
<label class="control-label dash-control-label col-xs-3">SUBGROUP:</label>
<div class="col-xs-9">
<select class="form-control" style="width: 100%;" name="subGroup" required [(ngModel)]="article.subGroup">
<option disabled [ngValue]="null">-/-</option>
<option [ngValue]="subgroup" *ngFor="let subgroup of subGroups">{{subgroup.title}}</option>
</select>
</div>
</div>
You need to pass the outcome of the filterBySubId method back to the view. You're not doing anything with the returned value.
I'd do something like this:
filterSubById(Id) {
this.filteredSubGroups = this.subGroups.filter(item => item.parentId == Id);
}
and in view
<option [ngValue]="subgroup"
*ngFor="let subgroup of filteredSubGroups">{{subgroup.title}}</option>

Getting value in jQuery from Boostrap 3 select

I am using Boostrap 3 and want to AJAX post a form created with Boostrap 3, but am having issues in obtaining the value of my drop down menu within a modal.
Generated HTML
<div class="modal in" id="UploadCsv" tabindex="-1">
...
<div class="form-group">
<label class="col-sm-4 control-label" for supplier Sku">SKU</label>
<div class="col-sm-6">
<select class="form-control" name="supplierSku" id="supplierSku>
<option value="1">Name</option>
<option value="2">Form</option>
...
<select class="form-control" name="form" id="form>
<option value="1">Name</option>
<option value="2">Form</option>
...
JS
$('input, select'). $('#UploadCsv')).each(function() {
data[$(this).attr('name')] = $(this).attr('value');
});
If I look at data in the console I have
supplierSku: undefined
form: undefined
despite selecting the option from the drop down. Jquery is picking up the name of the form group, but not teh value.
Based on my selection I would have expected to see supplierSku: 1 etc. Any suggestions on how to pick up the value for the selected drop down in jquery?
Looks like you forgot the closing quotes for both select id's:
<div class="modal in" id="UploadCsv" tabindex="-1">
...
<div class="form-group">
<label class="col-sm-4 control-label" for supplier Sku">SKU</label>
<div class="col-sm-6">
// Closing quotes on id attribute
<select class="form-control" name="supplierSku" id="supplierSku">
<option value="1">Name</option>
<option value="2">Form</option>
...
// Closing quotes on id attribute
<select class="form-control" name="form" id="form">
<option value="1">Name</option>
<option value="2">Form</option>
...

Categories