The goal is to select users according to the option chosen in the first select.
It works fine the first time you select that type of user. But when I change the user type and go back to the previous one, it doesn't show the options in the select. But through the inspect element it appears that the option has the "selected" attribute
<label for="UserType" class="col-md-2 control-label">User Type nbsp;<span class="text-danger small">*</span></label> <div class="col-md-4">
<select class="select2_demo_1 form-control" id="UserType" name="UserType">
<option value='0' selected disabled hidden>-- Selecionar --</option>
<option value="1">Boss</option>
<option value="2">Admin</option>
<option value="3">User</option>
</select>
<label for="Users" class="col-md-2 control-label">Users <span class="text-danger small">*</span></label><div class="col-md-10">
<select id="Users" name="Users" class="select2_demo_1 form-control" multiple style="width:100%">
<option data-type='1' value="1" >User Boss</option>
<option data-type='2' value="2" >User Admin</option>
<option data-type='2' value="3" >User Admin 2</option>
<option data-type='3' value="4" >User</option>
</select>
$('#UserType').on('change', function() {
var UserType = $(this).val();
$("select#Users option:selected").attr("selected",false);
$("select#Users option[data-type="+ UserType +"]").attr("selected","selected");
$("#Users").select2();
});
$('#UserType').trigger('change');
------ Solution ------
Change the code segment
$("select#Users option:selected").attr("selected",false);
$("select#Users option[data-type="+ UserType +"]").attr("selected","selected");
$("#Users").select2();
by the following
$('#UserType').select2('destroy').find('option').prop('selected', false).end().select2();
$('#UserType').select2('destroy').find('option[data-type='+ UserType+']').prop('selected', 'selected').end().select2();
You may think to add selected="true" and then change it to false when you apply the function attr()
Related
I created a simple search bar with multiple options enabled by the Select2 library:
<form th:action="#{/searchuser}" method="post">
<div th:object="${searchInput}">
<div class="input-group mb-3">
<input type="text" th:field="*{key}" class="form-control form-control-lg" placeholder="Search Here">
<div class="input-group-prepend">
<span class="input-group-text" type="submit"><i class="fas fa-search"></i></span>
</div>
</div>
<select class="select2-multiple-choices select2-choice" multiple="multiple" th:field="*{parameters}">
<option th:value="'id'" value="id"> Id</option>
<option th:value="'First Name'" value="First Name"> First
Name</option>
<option th:value="'Middle Name'"> Middle Name</option>
<option th:value="'Last Name'" value="Last Name"> Last Name</option>
<option th:value="'mail'" value="Mail"> E-Mail </option>
</select>
</div>
</div>
The controller:
#RequestMapping(value = "/searchuser", method = RequestMethod.POST)
public ModelAndView searchUser(Locale locale,
#ModelAttribute("searchInput") SearchUserDTO searchdto,
BindingResult searchBindResult,
Model model) {....}
SearchUserDTO contains String key and List parameters.
I would sent to server the search key and the selected options. How can I get the selection and pass them with thymeleaf?
I have a simple select form with three options. I want one of the to be "Not mounted"
The problem is that I cannot set "Not" in data-th-textbecause it is recognized as an expression.
<div class="form-group">
<label for="status">Status:</label>
<select data-th-field="*{status}" id="status" class="form-control">
<option data-th-value="available" data-th-text="Available"></option>
<option data-th-value="broken" data-th-text="Broken"></option>
<option data-th-value="not mounted" data-th-text="Not Mounted" ></option>
</select>
</div>
I receive an expesion
org.thymeleaf.exceptions.TemplateProcessingException: Could not parse as expression: "Not" (template: "exhibitor/editExhibitor" - line 20, col 60)
How can I show the "Not Mounted" text ?
If you're using data-th-text, then thymeleaf is expecting an expression that can be evaluated. You have 2 options here:
Use regular attributes.
<div class="form-group">
<label for="status">Status:</label>
<select data-th-field="*{status}" id="status" class="form-control">
<option value="available">Available</option>
<option value="broken">Broken</option>
<option value="not mounted">Not Mounted</option>
</select>
</div>
Make your attributes valid thymeleaf expressions.
<div class="form-group">
<label for="status">Status:</label>
<select data-th-field="*{status}" id="status" class="form-control">
<option data-th-value="'available'" data-th-text="'Available'"></option>
<option data-th-value="'broken'" data-th-text="'Broken'"></option>
<option data-th-value="'not mounted'" data-th-text="'Not Mounted'" ></option>
</select>
</div>
or
<div class="form-group">
<label for="status">Status:</label>
<select data-th-field="*{status}" id="status" class="form-control">
<option data-th-value="${'available'}" data-th-text="${'Available'}"></option>
<option data-th-value="${'broken'}" data-th-text="${'Broken'}"></option>
<option data-th-value="${'not mounted'}" data-th-text="${'Not Mounted'}" ></option>
</select>
</div>
You can make sure that Thymeleaf understands it's a string by using
single quotes:
data-th-text="'Not Mounted'"
Or even better, make it internationalized and get it from a message bundle:
data-th-text="#{notMounted}"
In your messages.properties:
notMounted=Not Mounted
but then this could alternatively be:
<option th:text="#{notMounted}" value="not mounted">Not Mounted</option>
Just note that whichever option you chose, you'll want to escape any single-quotes within your string with a backslash \.
Using :
How to create a Dynamic Bootstrap Multiselect
It was pretty easy to come up with this :
<fieldset class="my-fieldset" style="width: 500px;">
<legend class="my-fieldset">Catégories</legend>
<div style="text-align: center;">
<div style="display: inline;">
<span><b>Matériels</b></span>
<select style="display: none;" class="chkveg" name="categories" multiple="multiple">
#foreach (var configCateg in listeCategories)
{
if (configCateg.APPR_CATEGORIE.CATEGORIE.StartsWith("IF"))
{
<option selected="False" value="#configCateg.DESCRIPTION">#configCateg.DESCRIPTION</option>
}
}
</select>
</div>
</div>
</fieldset>
But what if i want to have some of the options selected and others not...
I know there is a selected property but it didn't change anything when i tried selected="false"
Any help is apreciated
Unfortunately all the below will result in a selected option item.
<option selected >One</option>
<option selected = "False" >One</option>
<option selected = "0" >One</option>
<option selected value="1">One</option>
<option selected=false value="2">222</option>
<option selected="i really dont want this" value="3">33</option>
If you do not want an item selected, you should render an option item without the selected attribute.
<option value="1" selected >One</option>
<option value="2">This one will not be selected</option>
<option value="3" selected >One</option>
You might consider using the Html.DropdDownListFor helper method or SELECT tag helper to render the select element with some options selected.
I am trying, without any luck, to use the selected item from a drop down list in the controller. I've stepped through the code and can see that each of the string values are "null" after they should be assigned.
Below is the code from the View
<span id="searchBox" class="boxMe" >
<select id="Table" title="Table" style="font-size:8pt;">
<option value="default">--Table Name--</option>
<option value="CE">CE</option>
<option value="PT">PT</option>
</select>
<select id="IssueType" style="font-size:8pt;">
<option value="default">--Issue Type--</option>
<option value="W">Warning</option>
<option value="E">Error</option>
</select>
<select id="Status" style="font-size:8pt;">
<option value="default">--Status Type--</option>
<option value="O">Open</option>
<option value="U">Under Review</option>
</select>
<input type="image" src="#Url.Content("~/Content/Images/Filter.bmp")" alt="Filter" style="padding-top: 0px;" />
</span>
And here is what I have in the controller. As this is a search filter I have this in the Index() method at the moment.
public ViewResult Index(FormCollection dropDownSelection)
{
string table = dropDownSelection["Table"];
string issue = dropDownSelection["IssueType"];
string status = dropDownSelection["Status"];
return View(db.FollowUpItems.ToList());
}
You should use the name attribute on your <select> tags, rather than id. The name is what is used as the key in the form post:
<select name="Table" title="Table" style="font-size:8pt;">
If you haven't already, you should also wrap your inputs in <form> tags:
<span ...>
<form method="post">
<!-- Inputs -->
</form>
</span>
I have several forms in ASP.Net MVC.
I noticed that some of the dropdowns close automatically in FireFox, but not in IE.
I don't have any Javascript or JQuery with triggered actions on any of these dropdowns.
Any ideas on why this is happening?
<form action="Index" id="MyID" method="get"><label>
Search <input id="searchWord" name="searchWord" type="text" value="" />
Category <select id="CategoryID" name="CategoryID"><option value="">-- Select All --</option>
<option value="1">Item A</option>
<option value="2">Item B</option>
<option value="3">Item C</option>
<option value="4">Item D</option>
<option value="5">Item E</option>
</select>
</label>
<label>
<input class="button" value="Search" type="submit" />
</label>
</form>
The dropdown list is coded using Razor as:
#Html.DropDownList("CategoryID", "-- Select All --")
The <label> tag defines a label. You have wrong close tag for <label>.