Dear all,
Please give me any suggestions for below requirement.
My requirement is, I need to select the multiple options from multi select dropdown list. I can select the multiple options in dropdown but those selected multiple options are not showing in the field.
example code:-
****************************************
<section>
<g:evaluate jelly="true" object="true" var="jvar_arr">
var arr = gs.getProperty(instances').split(','); // give the property name here
arr;
</g:evaluate>
<div class="input-block input-col">
<div class="field-label1"> <span class="asterisk">*</span> <span> instances </span> </div>
<div class="field-input multiselect-item">
<input type="text" id="Instances" placeholder="Start typing here to see results.." readonly="true" required="true" onclick="openSelectableDropdown('#Instances_drop_down', '#Instances_drop_down_arrow')"
selectedValue="" />
<i id="Instances_drop_down_arrow" class="fas fa-angle-down dropdown-arrow" onclick="toggleSelectableDropdown('#Instances_drop_down', '#Instances_drop_down_arrow')"></i>
<div id="Instances_drop_down" class="autocomplete-dropdown selectable-dropdown">
<div class="dropdown-wrapper">
<j:forEach items="${jvar_arr}" var="jvar_element">
<div class="dropdown-item" onclick="selectMulti(this, '#Instances',
'#Instances_drop_down');" value="${jvar_element}">${jvar_element} <i class="fas fa-check"></i></div>
</j:forEach>
</div>
</div>
</div>
</div>
</section>
*************************************************************************************
Ui page Client script
function selectMulti(item) {
// Display the item in the multiselect input field
$j("#" + $j(item).attr("value")).toggleClass("selected-item");
// Add the active-item class on the currently clicked item
$j(item).toggleClass("active-item");
// Show the check icon on the currently clicked item
$j(item).find(".fa-check").toggleClass("active-item-icon");
setValueOfHiddenPurposeField();
}​
Thanks & kind regards,
Reddy481.
1 ACCEPTED SOLUTION
Hi,
I am able to achieve using this
HTML:
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<g:evaluate jelly="true" object="true" var="jvar_arr">
var arr = ['Volvo','Audi','Opel','Nissan'];
arr;
</g:evaluate>
<select name="cars" id="cars" multiple="true">
<j:forEach items="${jvar_arr}" var="jvar_element">
<option value="${jvar_element}">${jvar_element}</option>
</j:forEach>
</select>
</j:jelly>Output:
Regards
Ankur
Hi,
I am able to achieve using this
HTML:
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<g:evaluate jelly="true" object="true" var="jvar_arr">
var arr = ['Volvo','Audi','Opel','Nissan'];
arr;
</g:evaluate>
<select name="cars" id="cars" multiple="true">
<j:forEach items="${jvar_arr}" var="jvar_element">
<option value="${jvar_element}">${jvar_element}</option>
</j:forEach>
</select>
</j:jelly>Output:
Regards
Ankur
