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.
Related
Please could I ask for help with the following:
I have a select control defined as below and I populate it's options with strings from an array of strings in my component called tools.Attributes.Serials It works fine:
<select class="noBorder additionalSelectStyle" name="filter_for" (change)="OnSerialChanged($event.target)">
<option *ngFor = 'let serial of tools.Attributes.Serials'>
{{serial}}
</option>
</select>
The displayed list will show the first item as the selected one.
Say I have a variable in my component's .ts code called nMyIndex = 1.
What code do I need to bind to nMyIndex so that the list appears with item 1 as default rather than item 0?
Thanks for any help,
OK, I found it, working now. Need to use as shown in following code snippet:
; let i = index' [selected]="i == nMyIndex"
By default oj-select-one displays only the first 15 values and then forces the user to search for remainder.
Is there a way to make oj-select-one show all values in the drop down list without having to use search ?
I tried using minimumResultsForSearch as below, this but this does not help.
<oj-select-one id="select1"
options="[[dataProvider]]"
value="{{selectVal}}"
minimumResultsForSearch="50"
style="max-width:20em">
</oj-select-one>
I am using the example in http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=selectOne&demo=dataFiltering
You chose the right attribute but used the wrong syntax. It should be minimum-results-for-search instead of minimumResultsForSearch
<oj-select-one id="select1"
options="[[dataProvider]]"
value="{{selectVal}}"
minimum-results-for-search="50"
style="max-width:20em">
</oj-select-one>
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 am just starting out with some java script in an asp.net mvc web site.
I current have a form which I am working on.
The first field which the user is prompted with is a combobox / select (in html)
here is the code for it:
<select name="select">
#foreach (var item in Model.networks)
{
<option value="">#Html.DisplayFor(modelItem => item.name)</option>
}
</select>
Now my next field depends on the option which they chose from the combo box.
How can I populate the next field based on the option they chose in the combo box?
So when the user navigates to the page they will ave a combo box populated with all the options. Below that will be empty fields. When the user selects a option in the combo box I want it to then populate the empty fields with the corresponding data from the option which was chosen.
How do I go about doing this?
Please give the newby answer as in the method in which it will be done. I am assuming that I will be using java script for it?
Although I cannot understand your question in detail, I hope I can help you.
HTML
If you have a select element that looks like this:
<select id=dropdown>
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>
Plain Javascript solution
Running this code:
var element = document.getElementByID('dropdown');
var current = e.options[e.selectedIndex].value;
Would make current be 2. If what you actually want is test2, then do this:
var e = document.getElementById('dropdown');
var strUser = e.options[e.selectedIndex].text;
Which would make current be test2
Put the onChange="getSelectedValue" attribute of the select element and then use the following javascript.
<script>
function getSelectedValue(sel)
{
txtToFill.Text(sel.options[sel.selectedIndex].text);
}
</SCRIPT>
If I understand your question correctly you want to react to a combo box value changing and display different content in your page.
If that is the case what you need to know is
how to handle the change event in the select (drop down)
populate empty fields
Here's how you can register and handle the change event in the dropdown:
$("select[name='select']").on("change", function(){
$('#input1').val("What you want in the input goes here");
});
Here's a fiddle that demonstrates this.
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.