In my cshtml page I have a select element with multiple options. Below it I have a button which needs the value of the selected option. How do I reference the value of the selected option?
<select>
<option value="1">1</select>
<option value="2">2</select>
<option value="3">3</select>
</select>
<input type="button" value="submit" onclick="location.href='#Url.Action("MyAction", "MyController", new { property = (how do i reference our selected option value here?)})'"
Related
If you select option 2 for example, I want to send both the value 2 (for the amount of books to be added) but also the Book_ID for the chosen book.
So in my method that retrieves the form I expect to get both an integer value of 2 and also an integer value for my Book_ID.
I was hoping you could do something like
<option value=#ShoppingCartItem.Book_ID value="1" >1</option>
but that obviously didn't seem to work.
Below is a code snippet from my current View.
#foreach (Lab2.Models.ShoppingCartDetail ShoppingCartItem in Model.ShoppingcartList)
{
<tr>
<td>#ShoppingCartItem.Title</td>
<td>#ShoppingCartItem.Author</td>
<td>#ShoppingCartItem.Price :-</td>
<td>#ShoppingCartItem.NumberOfBooks</td>
<td>
<form action="UpdateNumberOfBooks" method="POST">
<div class="form-group">
<select class="form-control" id="NumberOfBooks" name="NumberOfBooks" onchange="this.form.submit()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</form>
</td>
</tr>
}
If it's possible, how should my method look that retrieves this information?
Just add that value as an <input> to your form. For example:
<input type="hidden" name="Book_ID" value="#ShoppingCartItem.Book_ID" />
This would include the Book_ID as a separate value in the same <form>.
how should my method look that retrieves this information?
Presumably you have a method which receives something like this, no?:
public IActionResult UpdateNumberOfBooks(int numberOfBooks)
If that's the case, you'd just include this second value as well:
public IActionResult UpdateNumberOfBooks(int book_ID, int numberOfBooks)
Or if NumberOfBooks is included as part of a model, you'd add Book_ID to that model. Basically, however you currently receive the one value you have now, you'd add the new value alongside it.
im getting the list of object value from API and inside the object there has a property for identify the selected item
i am able to bind the items list to view
here is the json data
here is the my code :
<select class="form-control" name="Underwriter">
<option *ngFor="let underwriter of policyModel?.underwriterList" [ngValue]="underwriter.value" >{{underwriter.text}}</option>
</select>
any way to make the selected item ?
You can add just a [selected] to your select and check which underwriter has property selected as true.
like so:
<select class="form-control" (change)="onChangeunderwriter($event)" name="Underwriter">
<option *ngFor="let underwriter of policyModel?.underwriterList" [ngValue]="underwriter.value" [selected]="underwriter.selected == true">{{underwriter.text}}</option>
</select>
So just add:
[selected]="underwriter.selected == true"
A simplified plunker
In your question you say you want to "make" the selected item, which I assume means set it. This is how I have done it, but there might be other better ways.
You need to set the [attr.selected] in the option tag
<select class="form-control" name="Underwriter">
<option *ngFor="let underwriter of policyModel?.underwriterList" [ngValue]="underwriter.value" [attr.selected]="underwriter.text === underwriterTextString ? true: null">{{underwriter.text}}</option>
</select>
Then it your code you need to set underwriterTextString when the WebService API returns a result.
If underwriter.text does not work then try underwriter.value
However, in your comment below you now say that you want to "get" the selected item. This can be done by using the change event in the select tag
<select class="form-control" (change)="onChangeunderwriter($event)" name="Underwriter">
<option *ngFor="let underwriter of policyModel?.underwriterList" [ngValue]="underwriter.value" [attr.selected]="underwriter.text === underwriterTextString ? true: null">{{underwriter.text}}</option>
</select>
Then in your code your need something like this;
onChangeunderwriter(event) {
//the value will be set in event.target.value;
}
i am creating a web app and i have a dropdownlist
<select id="drdsearch" ng-model="drd" style="margin-top:-39px; margin-left:300px; height:30px; width:200px; font-size:12px;"><option value="select">select</option>
<option value="default">Default</option>
<option value="venue">Venue Name</option>
<option value="date">Date</option>
</select>
with these textboxes
<input type="text" ng-hide="true" ng-show="drd=='default'" placeholder="d" name="default">
<input type="text" ng-hide="true" ng-show="drd=='venue'" placeholder="e" name="venue name">
<input type="text" ng-hide="true" ng-show="drd=='date'" placeholder="l" name="Date">
i used angularjs for (hide/show)textboxes but now when i run my program dropdown automatically included an extra blank option field
now there are four fields in my dropdow
1st ( )blank
2nd default
3rdvenue
4thDate
what i need to do to remove the extra (blank option) from the dropdownlist
Initialize the value in your $scope.drd with 'default' and you should be fine.
I would like to modify the selected value of my dropdownlist without have to click on my dropdownlist.
I already tried this line with JQuery:
$('#select-nb-Persons-button').children(":first").text("3");
It printed well "3" for the dropdownlist but after, when I clicked on the dropdownlist, I noticed that it is always the first option tag that is selected and not the third option tag as I want. :
Code created by razor for the dropdownlist :
<div class="ui-select">
<div id="select-nb-Persons-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow">
<span>1</span>
<select data-val="true" data-val-number="Le champ nbPersons doit être un nombre." data-val-required="Le champ nbPersons est requis." id="select-nb-Persons" name="nbPersons">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
</div>
Can you help me please ?
Thank you
You can use val() to set the selected item in a select. To select the item with a value of 3, try this:
$('#select-nb-Persons').val('3');
Try below code.
$('#select-nb-Persons-button').children('select').val('5');
DEMO here
I am using this code on my Master page and wants to display option name on the reffered page
<select name=menu onchange="location.href=(menu.options[menu.selectedIndex].value)">
<option value="http:google.com">Google</option>
<option value="http:myurl.com">URL</option>
</select>
You need to use this to refer to event source object instead of menu the name of html element. You also have wrong url form and need to change it from http:google.com to http://google.com
Live Demo
<select name=menu onchange="window.location.href=(this.options[this.selectedIndex].value)">
<option value="http://www.google.com">Google</option>
<option value="http://www.stackoverflow.com">stackoverflow</option>
</select>