Develop Reference

Update the select options with given dynamic data

Need to send dynamic (not hardcode) data to a select element.
This code works great in one of my sheets but doesn't work in the other sheet.
The "select" element doesn't get updated with the options I send..
I don't get an error message either.
I've spent a lot of time twitching it and trying to find why but still don't see what's wrong.
p.s. I used a dummy object to send the data for testing purpose.
The html (used MaterializeCss framework)
<select class="icons browser-default" id="selName" onChange ="getNameText();">
<option value="" disabled selected>Choose week</option>
<div id = "err"></div>
//select element initialization in framework
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('select');
var options = handlers()
var instances = M.FormSelect.init(elems);
});
function handlers() {
var success = google.script.run.withSuccessHandler(addOptions).getNamesForDropdown()
var failure = google.script.run.withFailureHandler(showError).getNamesForDropdown()
return;
}
function addOptions(names) {
var selectTag = document.getElementById("selName") //select tag
for (var k in names) {
var thisID = k;
var thisText = names[k];
var option = document.createElement("option"); //creating option
option.text = thisText
option.value = thisID;
selectTag.add(option);
}
}
function showError() {
var err = document.getElementById("err").innerHTML = "There was an error."
}
//get the text of selected option
function getNameText() {
var sel = document.getElementById("selName")
var nameText = sel.options[sel.selectedIndex].text;
return nameText;
}
Dummy object I send:
function getNamesForDropdown() {
var namesObj = {
one: "blah",
two: "blahblah"
}
return namesObj;
}
Here's the result what I get (on the screen you there's only hardcoded option):

I handled it. I added a class "browser-default" to the select and the options got updated. This class comes from MaterializeCss Framework.

Unable to populate dropdowns dynamically using angularJs

I have 3 dropdowns, A, B, C.
Based on dropdown A selection, dropdown B will be filled.
Then based on dropdown B selection, dropdown C will be filled.
I am able to achieve first 2 steps. But I am unable to achieve third point.
jsfiddle link

What about
<div data-ng-app data-ng-controller="myCtrl">
<select data-ng-model="option1" data-ng-options="option for option in options1 " data-ng-change="getOptions2($index)">
</select>
<select data-ng-model="option2" data-ng-options="option for option in options2" data-ng-show='options2.length' data-ng-change="getOptions3()">
</select>
<select data-ng-model="option3" data-ng-options="option for option in options3" data-ng-show='options3.length'>
</select>
</div>
function myCtrl($scope) {
$scope.options1 = option1Options;
$scope.options2 = []; // we'll get these later
$scope.options3 = [];
$scope.getOptions2 = function() {
$scope.options2 = option2Options[option1Options.indexOf($scope.option1)];
$scope.getOptions3();
};
$scope.getOptions3 = function() {
var mergedOptions2=[].concat.apply([], option2Options )
$scope.options3 = option3Options[mergedOptions2.indexOf($scope.option2)];
}
}
Working fiddle

You are unable to achieve third point because you are trying to do that when dropdown A has a value, not B. If you add a new trigger on B, with the same functionality related to B, it will work.
Step 1: Add change trigger to your dropdown:
<select data-ng-model="option2" data-ng-options="option for option in options2" data-ng-show='options2.length' data-ng-change="getOptions3()">
Step2: Add a function on your controller to update options for dropdown C:
$scope.getOptions3 = function() {
var key2 = $scope.options2.indexOf($scope.option2);
var myNewNewOptions = option3Options[key2];
$scope.options3 = myNewNewOptions;
};
I've updated your fiddle accordingly: http://jsfiddle.net/Xku9z/1196/

You have forget to call getOption2() function for fetching option3
<select data-ng-model="option2" data-ng-options="option for option in options2" data-ng-show='options2.length' data-ng-change="getOptions2()">
</select>
Fiddler
http://jsfiddle.net/Xku9z/1198/

If I were you I would change your drop downs to call different functions. That way you aren't setting the third set of options before you need to.
Verified it works on JSFiddle.
Instead of..
function myCtrl($scope) {
$scope.options1 = option1Options;
$scope.options2 = []; // we'll get these later
$scope.options3 = [];
$scope.getOptions2 = function() {
var key = $scope.options1.indexOf($scope.option1);
var key2 = $scope.options2.indexOf($scope.option2);
var myNewOptions = option2Options[key];
var myNewNewOptions = option3Options[key2];
$scope.options2 = myNewOptions;
$scope.options3 = myNewNewOptions;
};
}
Use this...
function myCtrl($scope) {
$scope.options1 = option1Options;
$scope.options2 = []; // we'll get these later
$scope.options3 = [];
$scope.getOptions2 = function() {
var key = $scope.options1.indexOf($scope.option1);
var myNewOptions = option2Options[key];
$scope.options2 = myNewOptions;
};
$scope.getOptions3 = function() {
var key2 = $scope.options2.indexOf($scope.option2);
var myNewNewOptions = option3Options[key2];
$scope.options3 = myNewNewOptions;
};
}
And make sure you call data-ng-change="getOptions3()" on your second select tag.

How to change a field type in netsuite?

I am trying to create an online form using Netsuite.
We have a set for predefined fields like firstname, lastname, etc.
In the same we have a
NLSUBSCRIPTIONS
tag but the field type by default is drop down with multiple select option.
How can I change this drop down to a checkbox?

If you use a custom template you can hide the drop-down and iterate its options to create your own checkboxes.
e.g.
<div class="regFieldWrap">
<span class='cbExpand hideNsLabel'><NLCUSTENTITY_LIST_FIELD></span><input class="otherShadow valid" type="text" name="custentity_list_field_other"><span class="multiProto cbHolder"><input type="radio" name="custentity_list_field"><label class="cbLabel"></label></span>
</div>
and then
<script>
jQuery(function($){
// convert multi select to checkbox
$("span.multiProto").each(function(){
var proto = this;
var selName = $(proto).find("input").attr("name");
var otherCB = null;
$("select[name='"+selName+"']").css({display:'none'}).each(function(){
var sel = $(this);
var isReq = sel.hasClass('inputreq');
if(isReq) sel.removeClass('inputreq');
sel.find("option").each(function(){
if(!this.value) return;
var newby = $(proto.cloneNode(true));
var cb = newby.find("input").val(this.value);
if(isReq) cb.addClass('cb_selectone');
newby.find("label.cbLabel").text(this.text);
$(newby).removeClass('multiProto');
if((/\bother\b/i).test(this.text)){
var otherField = $("input.otherShadow[name='"+ selName+"_other']").each(function(){
var newOther = this.cloneNode(true); // strange but it gets around an IE issue
$(this).remove();
$(newby).find("input").data("conditionalOther", newOther);
newby.get(0).appendChild(newOther);
});
otherCB = newby;
} else proto.parentNode.insertBefore(newby.get(0), proto);
});
sel.get(0).options.length = 0;
});
if(otherCB) proto.parentNode.insertBefore(otherCB.get(0), proto); // make sure this is the end element
});
});

How Can I keep the dropdown last selected on refresh page

I have this HTML
<select id="drpRequestCategories" class="form-control" Width="100%">
<option value="-1">All</option>
</select>
and here is the function I fill the Select from it
function filldropdownlistcategory(res) {
var test = $.parseJSON(res.d);
$("#drpRequestCategories").empty();
$(test).each(function () {
var option = $('<option />');
option.attr('value', this.ServiceID).text(this.ServiceName);
$('#drpRequestCategories').append(option);
});
}
when I click on Search button on my page
1-it clear this dropdownlist but I need to keep the last selected value.
2- I call this function on every treeview node change so when I remove this
$("#drpRequestCategories").empty();
it doesn't remove the old dropdown values but append the new values to the old .

Ok first using localstorage set a key holding the last selected item ,while every node change first empty the select box and use the localstorage item to fill the box again
//Add the onchange listener for the select box
$("#drpRequestCategories").on('change',function(evt){
var optionSelected=evt.target.value;
localStorage.setItem("recent",optionSelected);
}
//Now your function
function filldropdownlistcategory(res){
//empty the box
$("#drpRequestCategories").empty();
$(test).each(function () {
var option = $('<option />');
option.attr('value', this.ServiceID).text(this.ServiceName);
$('#drpRequestCategories').append(option);
});
//Once U have appended the options attach the previous list to the select box
var prevOptions=JSON.parse(localStorage.getItem("options"));
for(var key in options){
var option=$('<option />')
option.attr("value",options[key]).text(options[key])
$("#drpRequestCategories").append(option)
}
//Now Select the Last selected option
var lastSelected=localStorage.getItem("recent");
$("#drpRequestCategories").val(lastSelected);
//Once all the options are populated call the storeOptions Function
storeOptions();
}
//Function to store the options
function storeOptions(){
var options=$("#drpRequestCategories").children();
var obj={};
for(var i=0;i<options.length;i++){
var optionText=options[0].value || options[0].innerHTML //Depends on what you want
//update the obj
obj["option"+i]=optionText;
}
//Now Store them in localStorage
localStorage.setItem("options",JSON.stringify(obj))//stringify will convert the object into a string
}

Get changed select box's selected value using variable to specify the select box

I know I can get the selected value like:
var selectVal = $('#mainIssueType: selected').val();
But how can I do the same thing passing in a variable as the select box id?
What I've tried:
var selectVal = $('#'+element.id+' :selected').val();
var selectVal = $(element+' :selected').val();
var selectVal = $([element]+' :selected').val();
Full function:
$(function(){
$('select').on( 'change', function( element ){
$('#'+this.id).nextAll('select').remove();
//get current selected option
var selectVal = $(element+' :selected').val();
// ^^ this is the problem
//create a new select box and add to branchDiv
var sel = $('<select>').appendTo('#branchDiv');
//give the new element an id matching
//the selected value from the previous element
sel.attr('id',selectVal);
//set the select box's options using the values
//from the "selectVal" object within the "tree" object
$(tree[selectVal]).each(function() {
sel.append($("<option>").attr('value',this.val).text(this.text));
});
});
});

If you want to use the event argument to retrieve the value of the selected option, you have to pass the target property of it to frame a Jquery object
Try,
var selectVal = $(element.target).find(':selected').val();
Or simply,
var selectVal = $(this).find(':selected').val();

It's not work because element in your case refer to select element not option, you want:
var selectVal = $(this).find('option:selected').val();

Just try like this http://jsfiddle.net/8nhmU/20/
<select id="selDemo">
<option value="1">Hi</option>
<option value="2">Hifds</option>
<option value="3">Hifsdf</option>
<option value="4">Hids</option>
</select>
Script:
$(document).ready(function() {
$('#selDemo').change(function(){
alert($('#selDemo').val());
});
});