In the model bean I have a List with my objects. Like this:
private List<Data> data;
class Data{
String val1;
String val2;
...getters, setters
}
I need to map a few from select tags to a list of my objects. I mean I have something like this:
<select name="val1">
<option value=1>val1 value 1</option>
<option value=2>val1 value 2</option>
</select>
<select name="val2">
<option value=1>val2 value 1</option>
<option value=2>val2 value 2</option>
</select>
after submit action I need to have a list with one Data element with selected values (val1, val2 selects). I need a list cause I have a lot of such "select" pairs and the count is determined dynamically.
Does anybody know how to that?
Thanks in advance.
if your using JSP, use <c:forEach>
http://www.tutorialspoint.com/jsp/jstl_core_foreach_tag.htm
Related
I appreciate your passing by my post. I have searched here in StackOverFlow and google as well to fix my following code:
My HTML code:
<form th:action="#{/surgerywaitinglist/saveToWaitinList}"
th:object="${waitinglistDTO}" method="POST">
.
.
.
<select name="departmentName"
th:field="*{department.departmentName}"
th:with="departmentName = ${waitinglistDTO.department.departmentName}"
class="form-control" id="departmentJS">
<option value="" th:selected="selected"
th:disabled="disabled">select option
</option>
<option th:each="department: ${departments}"
th:value="${department.departmentName}"
th:text="${department.departmentName}">
</option>
</select>
.
.
.
<input type="submit" value="Save" class="btn btn-primary" />
</form>
form other posts like this post I found out that th:field and th:selected do not work together; in fact, th:field needs to be replace with something else. Notice that the th:object holds another object (from Department class) ...
My DTO class:
public class WaitinglistDTO {
private Long waitingListId;
#NotBlank(message = "Please enter a procedure")
private String waitingListProcedure;
private String waitingListDiagnosis;
private Long waitingListPatientId;
private Long waitingListSurgeonId;
private Long waitingListDepartmentId;
#DateTimeFormat(iso=ISO.DATE)
private Date waitingListAdditionDate;
#DateTimeFormat(iso=ISO.DATE)
private Date waitingListActualBookingDate;
private Patient patient;
private Surgeon surgeon;
private Department department;
Could you help me figure this out?
Many thanxxxxx :)
...
Update:
The following image explains how it should look,,, however, the default option should be the select option which should be somehow disabled
This is the result I get when I apply the suggested code of Rafael da Silva ,, you can see the pre-selected option is the first option rather than the select option option :)
you can do like this:
<select name="departmentName" th:field="*{department.departmentName}" th:with="departmentName = ${waitinglistDTO.department.departmentName}" class="form-control" id="departmentJS">
<option selected="selected" disabled="disabled">select option</option>
<option th:each="department : ${departments}" th:value="${department.departmentName}" th:text="${department.departmentName}"></option>
</select>
this worked for me.
I don't see why you would add the selected to the blank option, the first option is always selected if your model object has nothing set and if it does normal behaviour would be to have that item selected, which th:field should resolve.
In case you want the select to always start at the default option, even if the model has another value or want to set it some other way. you can set th:id="*{department.departmentName}" and th:name="*{department.departmentName}" and than manualy handle th:selected.
As a side note theres no need to use the th version th:selected="selected" if using static values just selected or selected="selected would sufice in that case
Edit with code, not tested as i don't have my work pc where i am.
If you want to always have the first option selected even when editing with previous data
<select name="departmentName" th:name="*{department.departmentName}" th:id="*{department.departmentName}" class="form-control" id="departmentJS">
<option selected disabled>select option</option>
<option th:each="department : ${departments}" th:value="${department.departmentName}" th:text="${department.departmentName}"></option>
</select>
If you want to fill with existing data but default to the first option
<select name="departmentName" th:field="*{department.departmentName}" class="form-control" id="departmentJS">
<option disabled>select option</option>
<option th:each="department : ${departments}" th:value="${department.departmentName}" th:text="${department.departmentName}"></option>
</select>
I'm not 100% sure on the use of disabled but i think it should work, personally i would just leave it selectable and enforce a #notnull on your bean in controller validation.
the th:with annotation does nothing asfar i can see, what th:with is used for is defining a new variable for all elements nested inside the elment you define it on. example:
<div th:with="newVar='someString'">
<span th:text="${newVar}"></span>
</div>
I am passing Map which containg Integer and list from my controller class to view. Inside view I have select option in which i want to show only List value in option but i don't know how to implement this. Please help me to do this.
controller
Map<Integer, List<String>> deviceidsAndwhatToUpdateText = new HashedMap<Integer, List<String>>();
view
<select class="form-control select-checkbox"
id="WhatToUpdate" multiple="multiple">
<option th:each="idsAndText : ${deviceidsAndwhatToUpdateText}"
th:value="${idsAndText.value}"
th:utext="${idsAndText.value}">Wireframe</option>
</select>
This will list all the String in your map, is that what you want?
<select class="form-control select-checkbox" id="WhatToUpdate" multiple="multiple">
<th:block th:each="idsAndText : ${deviceidsAndwhatToUpdateText}">
<option th:each="text : ${idsAndText.value}" th:value="${text}" th:text="${text}" />
</th:block>
</select>
Is it possible to send value from options on example like this where x need to be value from option. This select im using on partial and ajax works with manualy added value as x. THX!
<select data-request-data = "id: x " class="form-control custom-select" data-request="onChangeValue">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
Just give your select a name, an unique name.
name="some_unique_name"
<select name="my_super_special_name_for_select" class="form-control custom-select" data-request="onChangeValue">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
Then when you change the value the value of the field is sent along in post
The result of:
public function onChangeValue()
{
traceLog(post());
}
In the log you will see then a result corresponding to
["my_super_special_name_for_select" => 5 ]
So you can fetch it with post('my_super_special_name_for_select') or whatever name you have given the select element to get the value.
public function onChangeValue()
{
$id = post('my_super_special_name_for_select');
}
Yes you can send value from select. But for this you will need to put it inside a form and then call data request on it. Value will be sent as part of post(). It can't be sent dynamically like the way you are using. if you can elaborate your external conditions more I can suggest other solutions too.
I am working on a Spring MVC application that use Thymeleaf for the view.
I am absolutly new in Thymeleaf and I have the following problem.
At this stage of the work into a view I have a select which options values are hard coded into the code, something like this:
<select id="selReg" class="form-control">
<option value="" >--SELEZIONARE UN'AREA--</option>
<option value="areaUmanistica" >Area Umanistica</option>
<option value="areaLinguistica" >Area Linguistica</option>
<option value="areaScientifica" >Area Scientifica</option>
<option value="areaPsicoMotoria" >Area Psico-Motoria</option>
</select>
Now, into my controller, I retrieve a list of Tad1005Tipodisciplina objects using a service and I put this list into the model.
List<Tad1005Tipodisciplina> listaTipoDisciplina = tipoDisiplinaService.getListaTipoDisciplina();
model.addAttribute("listaTipoDisciplina", listaTipoDisciplina);
This Tad1005Tipodisciplina class contain this field:
private String desTipDis;
that I want to use in my view to dinamically show the content of the previous select.
How can I use this list putted into the model to dinamically populate my select options?
You need to iterate through your list using th:each in the select statement. This is where you define a variable that will represent each object in the list, which in turn you can use in each of the option tags like this:
<select id="selReg" class="form-control" th:each="object: ${listaTipoDisciplina}" th:field="*{listaTipoDisciplina}">
<option th:value="${listObject.desTipDis}" th:text="${object.desTipDis}"></option>
</select>
/Edit: A minute too late :)
Solved by myself, in this way:
<select id="selReg" class="form-control">
<option value="" >--SELEZIONARE UN'AREA--</option>
<option th:each="tipoDisciplina: ${listaTipoDisciplina}"
th:value="${tipoDisciplina.codTipDis}"
th:text="${tipoDisciplina.desTipDis}">
</option>
</select>
Posted because maybe it could be util to someone in the future
I have three dropdowns with same class name:
<select class="MyClass">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="MyClass">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="MyClass">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
I want to change any of these dropdown values based on any other dropdrop selected. If I select option two from second dropdown - I want 1st and 3rd dropdown values to be two. All these dropdown should change values no matter which one I select.
Thanks.
You will need JavaScript to do this. Here is an code example using jQuery:
$('.MyClass').on('change',function(){
$('.MyClass').val( $(this).val() );
});
This will add an EventListeneer for the change Element and update all DropDowns to the value of the changed one.
http://jsfiddle.net/CWP7Q/
you can use jQuery or normal JS, but my example contains Jquery, which will give you an idea. Please check the example in Jsfiddle.
The example binds a change event to the class name of the three selectors:
$(".MyClass").change(function(){
$(".MyClass").val($(this).val());
});
and Voila, every selector gets changed.
Somehting like (with jQuery)
$('.MyClass').change(function() {
$('.MyClass').val($(this).val());
});