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.
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 using some jQuery to populate various dropdowns. I was able to get the jquery to show current value as the first option.
However, I need it to not only show as the first option, but as the currently selected option so that the selection doesn't appear twice in the dropdown.
As shown in the images below, you see the current value is Target. But after clicking the dropdown button, Target is listed twice:
Here is what the current jQuery looks like:
$(function()
{
$eexist = $(this).attr('data-exist');
$('#eexist option:first').val($eexist).text($eexist);
}
Which goes into this modal form dropdown select:
<div id="editCustModal">
<form id="editCustForm" name="editCustForm">
<label for="eexist">Existing/Target</label>
<select class="form-control" id="eexist" name="eexist">
<option></option> // keeping this or not does nothing
</select>
</form>
</div>
The value and the text are the words Target and Existing.
To reiterate, if the current value is Target, then when you click on the dropdown, you should only see Target as the currently selected item AND only see it once.
If you want to select first option then below is the code:
$('select option:first-child').attr("selected", "selected");
But if you want to select the current value then below is the code:
$('#eexist option:first').val($eexist);
this should only work if $eexist exists as value in dropdown
Since you didn't provide much so it's hard to tell..At least provide a jsfiddle link when you ask a question
Do it this way...
$(document).ready(function(){
$("#myselect").change(function(){
var toR = $('<div>').append($('#myselect option:selected').clone()).html();
console.log(toR);
$("#myselect option:selected").remove();
$("#myselect").html(toR+$("#myselect").html());
});
});
Working Fiddle
I'm using tablesorter and the filter widget. I found this jsfiddle example that allows filtering entries with a select box (Filter by age). I want to add that select box to my example, but it doesn't work when simply adding
$(".selectAge").bind('change', function (e) {
var cols=[]
cols[3] = $(this).val()
$('table').trigger('search', [cols]);
});
to my example code. Would you please tell me how to get the select box to work?
My example code is a copy from the official example.
It was working, it just didn't look like it. The one problem with the select is that the "reset" option needed an empty string as a value:
<select class="selectAge tablesorter-filter" data-column="3">
<option class="reset" value="">Filter by age</option>
<option>>=25</option>
<option><=25</option>
</select>
Here is an updated demo (all I changed was the select and added the blue theme css).
Update: Just so you know, in the next update, you can just give that select a "search" class name like the other input, and be sure to include a data-column="#" attribute, and have it work automatically when you use bindSearch, so there would not be a need to add extra code:
$.tablesorter.filter.bindSearch( $('#mytable'), $('.search') );
I have a bootstrap selectpicker and what I am trying to do is get multiple options selected once I load the page. I am passing in a string from a servlet to a script.
I have a selectbox in my html with an id, Project1, and class, selectBox.
In my script:
$(document).ready(function() {
$('.selectBox').selectpicker();
});
var index2="${projectindex}";
$('#Project1').selectpicker('val',index2);
projectindex is the variable being passed from the servlet (using jsp). I checked it and it passes correctly to something similar to this:
['project1' , 'project2']
These two are values in the select box, but they are not selected once the document loads. Can someone tell me what I did wrong?
Thanks for any help!
In case you haven't solved this in a month. I think the reason why it doesn't show the selected items after the document loads is because you are calling selectpicker initializer two times when you should call it once.
You just have to populate your select as you would normally and just call the selectpicker inside the document.ready. For example:
In my JSP, I have a multiple select to choose days of the week which I pass through the servlet using an array, and I want some of them to be selected:
<select class="selectpicker" multiple name="dayGroup" title="Select days">
<c:forEach var="weekDay" items="${weekDays}">
<option value="${weekDay}" ${fn:contains(days, weekDay) ?'selected' : ''}>${weekDay}</option>
</c:forEach>
</select>
Where weekDays is an array containing the names of the days of the week and days is a List with some of the days.
And in Javascript I just have this:
$('.selectpicker').selectpicker();
And it shows alright.
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..