I am creating a select list in my .aspx page.
<label for="AccessType" class="required"><span class="required">*</span><%=Html.Resource("accessType")%>:</label>
<select id="AccessType" name="AccessType">
<% foreach (var item in Enum.GetValues(typeof(Security.AccessType)))
{%>
<option value="<%=(int)item%>"><%=item%> </option>
<%}%>
</select><br />
Now every time I load the page it is selecting the first value as default, where as I want the value present in model to be the selected.
I am biniding the dropdown to a enum in my code. Security.AccessType is a enum and not a model. so every time the page loads it shows the selected value of the dropdown as first enum
I want the selected item to be say Model.AccessType...
I know its a very basic question but still any help?
You can give the option which you want to be default a "selected" attribute, like:
<option value="apple" selected="selected">apple</option>
If you want to select an option dynamically, you can do it by javascript. Eg:
var el = document.getElementById("AccessType");
el.selectedIndex = yourIndex; //index of the option you want to select
//or
el.value = "yourValue"; //value of the option you want to select
I used the followig and got the result..
$('#ddlAccessType').val($("#ddlAccessType option:contains('" + $('#AccessTypeValue').val() + "')").val());
This is first getting the AccessType value then checking for its index in the dropdown list and then setting the selected index to the index found out.
A bit bizzare, but worked fine for me..
Related
I want null option selected displayed as --Select-- by default in my dropDown. I'm trying to do it like this
<select class="form-control" asp-for="EducationId" asp-items="#(new SelectList(Model.educations, "Id", "Name"))"><option>--Select--</option></select>
It loads dropdown perfectly with --Select-- option selected but it does not make its value null. And when I try to get it value without selecting any option doing this
$('#EducationId option:selected').text()
It returns string having --Select--
But I want it to return null
I've tried this solution by adding disabled selected but according to its statement, once I select any option, it does not allow me to select that first option again. but in my case, this dropdown is optional and user can un-select any selected option.
How could I make this dropdown optional?
Any kind of help will be appreciated.
The educations is a bunch of items you are presenting to the user to select from. Simply add another item to it like this (I am assuming it is called Education):
Model.educations.Insert(0, new Education{Id = -1, Name = "--Select--" });
Then check if that item has been selected and do whatever you need to do.
I am new to Angular.Js. If I hava a dropdown and and it is picking the selected data from the dropdown. I am able to do that but It is not bringing the selected value for that dropdown. What is the property I need to set so whenever I come to that page, it shows the selected value in the dropdown .
Here is a portion of my code:
<select class='form-control' id="CreateRouteType"
ng-options="createRoute.Name for createRoute in vm.CreateRouteList"
ng-model="vm.ProcessDataSettings.CreateRouteTypeId" >
<option value="vm.ProcessDataSettings.CreateRouteTypeId" selected></option>
</select>
what do I need to do to show the selected value in the dropdown as selected?
correct me if I am wrong. Are you asking when you change options, what is the value in the memory?
Looks like you have ng-model="vm.ProcessDataSettings.CreateRouteTypeId". I am sure the selected value is in the vm.ProcessDataSettings.CreateRouteTypeId ?
Look at this question: AngularJS How do I pre select the value of a dropdown when the value is retrieved from a webservice?
<select class='form-control' id="CreateRouteType"
ng-options="createRoute.Name for createRoute in vm.CreateRouteList"
ng-model="vm.ProcessDataSettings.CreateRouteTypeId" >
</select>
essentially, in your controller initialize function, you should set the value of ng-model in the select tag to what you want to be preselected. So something like this:
$scope.vm.ProcessDataSettings.CreateRouteTypeId = the object that you want to be preselected;
I'm banging my head against the wall on this one.
I have an array of objects that will be used to populate a select drop down:
CardCount = [{"ClientId": "0010", "Description": "0010 (206 Members)"}, {"ClientId": "0051", "Description": "0051 (1 Member)"}, ........]
When I attempt to use ng-options, the value of the option is set to the index, not to the ClientId as desired. To get the value in each option to be the ClientId, I have to use a ng-repeat in the options. Here is my html:
<select ng-model="CurrentClient">
<option ng-repeat="item in CardCount" value="{{item.ClientId}}">{{item.Description}}</option>
</select>
Initially, all is well, the select and options are generated correctly, and the first option is correct. Now, when a certain button is clicked somewhere else on the page, it becomes necessary to recreate this select and options with a smaller array of similar objects. However, doing so creates a blank option with a value of "? string:0010 ?". This is the option that is selected. Again, I cannot use ng-options to correct this problem because doing so doesn't set the value attribute in the option tags correctly. So, I added this to the option tag:
<option ng-repeat="item in CardCount" value="{{item.ClientId}}" ng-selected="CurrentClient == item.ClientId">{{item.Description}}</option>
Now, that does mark the correct option as selected. However, the drop down still shows the blank option. Here's the rendered html:
<select ng-model="CurrentClient">
<option value="? string:0010 ?"></option>
<option value="0010" selected="selected">0010 (206 Members)</option>
</select>
As you can see, it sets the correct option to selected. However, it sets it to selected="selected", and not just selected. When I inspect element and change selected="selected" to selected (remove the equals and everything after it), the drop down then correctly displays the correctly selected option.
Again, initially the select and options work great. The problem seems to happen only after the array that the select is created with is changed. How can I get this select and options working correctly after I change the array, and not show that first blank option?
Thanks!
Changed you option element to set value by default.
<option ng-repeat="item in CardCount track by item.ClientId"
value="{{item.ClientId}}">{{item.Description}}</option>
Hope this could help you. Thanks.
ng-options is definitely the way to go:
<select ng-model="selected.ClientId" ng-options="it.ClientId as it.Description for it in clientList">
<option value="">-</option>
</select>
//initial code
var selectInputs = document.querySelectorAll('option:checked');
var selectArray=[];
for(var i=0;i<selectInputs.length;i++)
{
selectArray[i]=selectInputs[i].value;//am doing this since I found out (from stackoverflow) that selectInputs contains a NodeList and in order to use it, it must be converted or saved as an array
}
//later stage manipulation code
var input_select= document.querySelectorAll('option:checked');
for(var i=0;i<input_select.length;i++)
{
input_select[i].value=selectArray[i];//I am trying to change the value of the <select> option
}
PURPOSE: User selects option in a form and data is saved in local storage.
I want to reflect the same when the form reloads. I am not working for a specific form so using Jquery seems futile(as it works with class or id and I don't know the id or class of any tag of the generic form)
PROBLEM:
The problem is that I wanna select the entire options set of tag and not just the ones that have been checked/selected.The code above sets the value of the default selected option to the one stored in local storage but doesn't reflect the change in the form. It always displays the default value though giving
alert(input_select[i].value);
reflects the internal change perfectly!
Guess I gotta answer my own question :-D
If you could see, there's just one silly change in the
//later stage manipulation code
ABOVE.
ANSWER:
var input_select= document.querySelectorAll('select');
for(var i=0;i<input_select.length;i++)
{
input_select[i].value=selectArray[i];//I am trying to change the value of the <select> option
}
Instead of
var input_select= document.querySelectorAll('option:checked');
It must be
var input_select= document.querySelectorAll('select');
REASON: I have been trying to assign the stored value into the option itself (the option tag) rather than the select tag as a whole.
WARNING: In the code
input_select[i].value=selectArray[i];
It could also be
input_select[i].value="Friday";
provided that you already have an option like that, else it would show a blank.
<select name="days" id=days">
<option value="0"> Friday </option>
<option value="1"> Monday </option>
</select>
works
<select name="days" id=days">
<option value="0"> Saturday </option>
<option value="1"> Monday </option>
</select>
doesn't work. Shows a blank.
I am newbie to jQuery. I had to use multiselect in one of my fields in my jQuery pages.
I selected the data and processed and stored it in database.
I dont want to go through the jQuery code, as of now. I need the values what I selected in the entry pages needs to be reflected in the edit page. I need to know how to do that.
<SELECT id="s1" multiple="multiple" name="PLTF_MAP" class="input-box">
<%
try{
//getting values and names from database
out.println("<option value="+ temp.getCode()+ ">"+temp.getDesc()+ "</option>");
}
}catch(Exception exe){
exe.printStackTrace();
}
%>
</SELECT>
Screenshot below: Platform is my field, In edit page, I need all those selected fields to be checked.
the val function called from the select will return an array if its a multiple:
$('select#s1').val();
In this fiddle: http://jsfiddle.net/mdPQw/1/
you can find two example:
the first create a select from the selected value of yuor select.
The second select the selected item of the first multiselect in the third multiselect.