How to create dropdown list dynamically based on state field choices

[Rajeshkumar1]

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.

[Bhojraj Dhakate · Accepted solution]

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

[Bhojraj Dhakate]

Hi Rajeshkumar,

Any Update?

Thanks,

Bhojraj

[Rajeshkumar1]

Bhojraj thanks for your help. Last week itself I completed the above task, Your code also correct. Even logical work is easy for me, But whenever I am using HTML I am facing a lot of difficulties. );

[T_S_M]

I'm new to this so I'm missing the basics here.

Soup to Nuts:

1) what column type are you using in table?

    what are the options to specify

2) where does html code go?

3) where does server side go?

thanks