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;
}
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.
I have the following html code (index.aspx):
<select class="ct-input ct-term" name="term">
<option value="5">5</option>
<option value="10">10</option>
</select>
I would like to select the proper item of the select list, regarding to querystring, from the code behind on the page load event. Is it possible? Querystring looks like: index.aspx?term=10 (10, so select the option with the value of 10).
I had the same issue with number input, but that one was easy, all I had to do was make it runat="server", then write name.Value = "something".
Unfortunately that won't work here, because my form doesn't have the attr runat="server", and I don't wanna add it, because then it would add a viewstate too and make the url unreadable. Is there any other solution? Ps.: form's method must be GET.
You could set the correct item into ViewBag in your action and in the view set selected based on the value in ViewBag. eg:
public ActionResult (int term){
ViewBag.Term=term;
return View();
}
<select class="ct-input ct-term" name="term">
<option value="5" <% if(ViewBag.Term==5){<text>selected</text>} %> >5</option>
<option value="10" <% if(ViewBag.Term==10){<text>selected</text>} %> >10</option>
</select>
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 have a form that has 2 select boxes (Country and State) that have their available options contained in partial HTML files, due to their size.
In the event of a validation error, I want to mark the option the user originally selected as "selected".
Since the options are contained in a partial HTML file, I am not sure that this is even possible:
Any suggestions would be great. Thanks
// Inside the View
<select name="State" id="State">
#Html.Partial("States", Model);
</select>
#Html.ValidationMessageFor(model => model.State)
The partial simply contains the HTML:
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="AA">Armed Forces Americas</option>
<option value="AE">Armed Forces Europe, Middle East</option>
[...]
Instead of using strange Partial, why you just do not use helper DropDownList. You can find many examples, like this one http://peternewhook.com/2013/02/asp-net-mvc-selectlist-selectedvalue-dropdownlistfor/
I am using asp.net and have a HtmlSelect element on my page (with runat="server"). Normally I will just set the DataSource to some loaded data and DataBind. However in this case the data has one level of hierarchy and I want to represent this in the HTML with an optgroup. Google hasn't come up with any joy - is this even possible?
I've had a similar problem to solve and this is how I did it. Before I continue I did find all sorts of re-fracturing methods for lists, which probably do work. However, I did not think this the best route to go for my solution. Here's what I did:
I also needed to know which option a user selected in the drop down list but found that you can't build drop down list with option groups in ASP.net. So to do this I just built a simple <select> with <optgroup>'s and <option>'s in each group. Then I placed a <div> with a hidden textbox, which had the runat="server" set. I set the "onchange" event, on the select, to change the text value of the hidden textbox to whatever the value the option was, which was selected by the user, using javascript. Then, when the post back occurs, the code behind had access to the value the user selected, via the hidden textbox's runat="server". Problem solved! The code looks something like this:
Code in the HTML (aspx):
<div id="selectDiv">
<select id="selectItems" onchange="document.getElementById('hiddenselectDiv').getElementsByTagName('input')[0].value = this.options[this.selectedIndex].value;">
<optgroup label="Johannesburg">
<option value="Wilropark">Wilropark</option>
<option value="Bryanpark">Bryanpark</option>
<option value="Hurlingham">Hurlingham</option>
<option value="Midrand ">Midrand </option>
<option value="Glenvista">Glenvista</option>
<option value="Sunninghill">Sunninghill</option>
<option value="Edenvale ">Edenvale </option>
<option value="Parkhurst">Parkhurst</option>
</optgroup>
<optgroup label="Cape Town">
<option value="Tokai">Tokai</option>
<option value="Durbanville">Durbanville</option>
</optgroup>
<optgroup label="Durban">
<option value="Musgrave">Musgrave</option>
</optgroup>
<optgroup label="Pretoria">
<option value="Hatfield">Hatfield</option>
</optgroup>
</select>
</div>
<div id="hiddenSelectDiv">
<!--
Note: You probably want to set the hidden value to the first item you have seleced when you build the <select> object.
-->
<input type="hidden" id="selectedItem" value="Wilropark">
</div>
In the Code behind (C#):
if (!string.IsNullOrEmpty(selectedItem.Value))
{
//validation or whatever you want....
}
I've been looking around for the same thing, and it doesn't look like ASP supports this natively. One Google search found someone recommending a library at http://www.codeplex.com/SharpPieces, but I've never used it and I don't know how good it is. Other people talk about writing your own renderer for optgroup support.