I need to create drop-down dynamically in service portal, The drop-down field name is "State", In this state drop-down field I need to show only the "Case[sn_customer_service_case]" table state field choices, Show for I try to query the "Choice" table and query the element is state, Then I get the label and value and pushed into one array, I try to pass that array in client-side & using document.createElement("option"); I try to create drop down option in HTML, Below is my code.. Please, anyone teach me...
Server-side script:
var choice = new GlideRecord('sys_choice');
choice.addEncodedQuery("name=sn_customerservice_case^elementLIKEstate");
choice.query();
var allChoice = [];
while (choice.next()) {
allChoice.push(choice.label+choice.value);
data.allChoice = allChoice;
Client script:
var ic = c.data.allChoice;
var myJSON = JSON.stringify(ic);
var mySelect = document.getElementById("mySelect");
for (var i = 0; i < myJSON.length; i++) {
var option = document.createElement("option");
option.innerHTML = myJSON[i];
option.value = myJSON[i];
mySelect.options.add(option);
}
HTML:
State:
<select id="mySelect" ng-modal="data.stateNew">
</select>
But my output is like below image, It creates a separate controller for each letter from the array, Like for "New" state its create 3 option one is "N" second is "e" third is "w", For commas also its creates separate options.
Hi,
Please find below sample code:
HTML:
<!-- Event -->
<div class="form-group" ng-class="{ 'has-error' : registration.select_event.$invalid && c.submitted }">
<div class="col-md-12">
<select ng-model="c.select_event" id="select_event" name="select_event" class="form-control" ng-required="true" ng-options="event.name for event in c.data.events"> //Look at the select tag
<option value="" disabled selected> -- Select Event -- </option>
</select>
<p ng-show="registration.select_event.$invalid && c.submitted" class="help-block">${An event is required.}</p>
</div>
</div>
Server Script:
(function() {
/* Get Events for Event Select Box. Only load them initially */
if (!input) {
var events = [];
var grEvent = new GlideRecord("u_hackthon_events"); // Gliding to table
grEvent.addActiveQuery();
grEvent.query();
while (grEvent.next()) {
events.push({ // Pushing values to html side
"name": grEvent.getDisplayValue("u_event_name"),
"sys_id": grEvent.getUniqueValue()
});
}
//make events available to the client
data.events = events;
}
}
Here is my result:
Thanks,
Bhojraj
