I'm using a html dropdown in my project. How do I get the select value in the Express server?
<div class="mb-3">
<label for="kk" class="form-label">Designation</label>
<select class="form-select" name="picker" aria-label="Default select example" id="kk">
<option selected>Select</option>
<option value="1">Proffesor</option>
<option value="2">Associate Proffessor</option>
<option value="3">Lab Assistant</option>
</select>
</div>
In my post request handling method I have used this code to get the value:
const f = req.body.picker;
What this gives me is the index of the selected values in the dropdown like 0,1,2 etc instead of actual values like professor, associate professor,lab assistant.
You actually get what is in value attribute of the selected option when you send your request. For the data you want, you can do it this way:
<div class="mb-3">
<label for="kk" class="form-label">Designation</label>
<select class="form-select" name="picker" aria-label="Default select example" id="kk">
<option value="" selected>Select</option>
<option value="Proffesor">Proffesor</option>
<option value="Associate Proffessor">Associate Proffessor</option>
<option value="Lab Assistan">Lab Assistant</option>
</select>
</div>
And that is what you will get :
const f = req.body.picker; // -> "" or "Proffesor" or "Associate Proffessor" or "Lab Assistan"
Related
Here I want to get a project from database to edit or change its properties for ex. destination country.
when the project is loaded the select element should be already selected same as the project.DestinationCountry. Then I may change this property if needed.
<select type="text" class="form-control" id="Destination" value="#project.DestinationCountry">
<option value="Canada">Canada</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
</select>
I tried to use value="#project.DestinationCountry" within select element but it did not work.
Here is c# code
private ProjectModel project;
protected override void OnInitialized()
{
project = _db.GetProject<ProjectModel>(id);
}
This won't work since you can't add a value to the select element.
<select type="text" class="form-control" id="Destination" value="#project.DestinationCountry">
<option value="Canada">Canada</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
</select>
However, to make an option selected by default you need to use the selected attribute on option. To make sure the select element shows the fetched value from database, the best bet would be to use conditionals. If project.DestinationCountry matches the value add the selected attribute.
<select type="text" class="form-control" id="Destination">
<option value="Canada" selected>Canada</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
</select>
You can achieve this using conditional attributes
<select type="text" class="form-control" id="Destination">
<option value="Canada" selected="#(project.DestinationCountry == "Canada")">Canada</option>
<option value="Sweden" selected="#(project.DestinationCountry == "Sweden")">Sweden</option>
<option value="Switzerland" selected="#(project.DestinationCountry == "Switzerland")">Switzerland</option>
</select>
This checks whether the condition matches. If true then the value assigned is same as the attribute name thus resulting in selected="selected". When the value is false the attribute won't render at all. Or better use a for loop to output the options and for each entry you can check whether it's the current value and then add selected attribute to it to it.
I did like this and it worked but I want to know if there is smarter solution for that.
<select type="text" class="form-control" id="Destination">
<option value="">Select a country</option>
#foreach (var country in Countries)
{
if (project.DestinationCountry != null)
{
<option value="#country" selected=#(project.DestinationCountry.ToLower() ==
country.ToString().ToLower())>#country</option>
}
else
{
<option value="#country">#country</option>
}
}
</select>
I have a drop down which by default on page load it select "PLEASE SELECT USECASE" in the dropdown
But i am expecting "EUC Proxy" to be selected on page load instead of "PLEASE SELECT USECASE"
HTML IS SHOWN BELOW
<div class="form-group">
<label for="bot">Use Case</label>
<select id="select" formControlName="useCase" class="form-control" class="form-control" [(ngModel)]="scheduleModel.UsecaseId">
<option value="-1" [selected]="isSelected"> Please Select Use Case </option>
<option *ngFor="let uc of useCaseList" [value]="uc.BOTId"> {{uc.BOTName}}
</option>
</select>
</div>
</div>
*HTML i CHANGED TO *
[selected]="1"
But it doesn't made any difference.See the changed HTML Below
<div class="form-group">
<label for="bot">Use Case</label>
<select id="select" formControlName="useCase" class="form-control" class="form-control" [(ngModel)]="scheduleModel.UsecaseId">
<option *ngFor="let uc of useCaseList" [selected]="1" [value]="uc.BOTId"> {{uc.BOTName}}
</option>
</select>
</div>
</div>
SAME IN IMAGE
I am getting "test Bot" selected in drop-down, which is last item in the drop down like below:
But i am expecting this: where uc.BOTId =1 is "EUC Proxy" Not "test Bot"
TS file
ngOnInit() {
getUsecaseList() {
this.manageBotService.getAllBots().subscribe(res => this.useCaseList = res);
}
}
Why i am unable to select "EUC Proxy" which having uc.BOTId =1 on page load?
Remove [selected] from your options.
The [(ngModel)] part from your 'select' will set the value to selected (depending on the value the 'scheduleModel.UsecaseId' has.
I didn't see you using the instruction that makes it default:
value='default'
for instance:
<select name='test'>
<option value='default' selected='selected'>Please select the value</option>
<option value='value1'>value1</option>
<option value='value2'>value2</option>
</select>
Set scheduleModel.UsecaseId = 1 after loading the drop-down on ng-init().
Beginner here...user can select filter values from drop down .Each selection should add a new drop down with selected value..intention is user can edit the selection the way they want and select as many filter they want...how to implement this in angular 6?any pointers..thanks for help..
Please check this, I done this from an assumption. I think you can reach your need by using this code.
html
<div>
<div id="AddItem">
<h2>Add State/City</h2>
<select [(ngModel)]="dataDetails" (change)="addData("")">
<option value="">-- choose an item --</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
</select>
</div>
<div *ngFor="let item of items;">
<select [(ngModel)]="selectedData" (change)="addData(item.name)">
<option value="item.name">{{item.name}}</option>
</select>
</div>
<div>
{{a}}
a: <input [(ngModel)]="a" ng-change="changeData()" />
b: <input [(ngModel)]="b" />
</div>
</div>
js
items:any = [];
addData(data=""){
if(this.dataDetails || data){
if(!data)
data = this.dataDetails;
this.items.push({
name: data
});
}
}
<form action="getDepartmentID" method="post">
<div id=main>
<select id="depList"name="depList"style="width:190px;"class="selListBox">
<option value="0">[Please Select]</option>
<option value="43">Information Technology</option>
<option value="44">Costing and Budgeting</option>
<option value="45">Supply Chain</option>
<option value="61">Marketing</option>
<option value="62">Financial</option>
<option value="63">HR</option>
</select>
</div>
</form>
on submit , query string contain parameter with value i.e. ?depList=43
When I populate this list using jquery .load(); function i.e.
$('#main').load('ajax/Options.jsp');
Options.jsp
<select id="depList"name="depList"style="width:190px;"class="selListBox">
<option value="0">[Please Select]</option>
<option value="43">Information Technology</option>
<option value="44">Costing and Budgeting</option>
<option value="45">Supply Chain</option>
<option value="61">Marketing</option>
<option value="62">Financial</option>
<option value="63">HR</option>
</select>
it successfully populate but when I press submit after selecting an options, it does not send any parameter, even I use the following
$("#depList").change(function() {
$('#depList option:selected').attr('checked', 'checked');
});
How to resolve this situation?
If you want the form information in the query string upon submit you need to be using GET not POST
<form action="getDepartmentID" method="get">
i have 2 dropdown menus,one is with a list of car names and another one is with list of number.if i select the any one of the car names from 1st ddl the second one should show the corresponding number related to the selection.
<form method="post" action="sample2.jsp">
<select name="sel1">
<option value="Alto">Alto</option>
<option value="Esteem">Esteem</option>
<option value="Honda City">Honda City</option>
<option value="Chevrolet">Chevrolet</option>
</select>
<br>
<select name="sel2">
<option value="1.1">1.1</option>
<option value="1.2">1.2</option>
<option value="1.3">1.3</option>
<option value="1.4">1.4</option>
</select>
<input type="Submit" value="Submit">
</form>
example:
alto->1.1
You could it with jQuery as below:
$('#sel1').change(function(){
var index = $('#sel1').attr('selectedIndex');
$('#sel2').attr('selectedIndex', index);
});
See example at: http://jsfiddle.net/a2crA/1/