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.
Related
If I have only one option in my dropdownlist, I need to select this option as default. How can I do this using jQuery?
I think you are new to SO, the usual procedure here is to provide some code of your own efforts on the matter before posting. That said, this is simple JQuery:
Edit to fit new specifications:
if($("#select_id option").length == 2){ //if there are exactly 2 options in the select element
$("#select_id option:nth(1)").attr("selected",true); //take the second option (element 0) inside the element with id "select_id" and set the selected attribute.
} //I think we do not need an else if any other thing will select the first option by default
Anyway, first option should be selected by default.
<select id="select_id">
<option value=1>First option is selected by default</option>
</select>
<!--adding proof that it is selected-->
<script>
$(function(){
alert($("#select_id").val()); //this will alert 1, since is the value of my first option
});
</script>
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>
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..
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.