How to add dropdown selectbox in the editon attribute table
in the file dhtmlEdit.js, in the function Map.prototype.editTableAddRow, replace
var input = createInput(td, "edit_feature_" + aFeature.id + "[" + this.editAttributeNames[i] + "]", value, 'text') input.onkeypress = function() { if (!this.changed) { if (aFeature.operation != 'insert') setFeatureOperation(aFeature, "update"); var validate = xGetElementById('validate_all'); validate.className = "form_button_hilight"; if (editDisplayAction != 'folder'){ var validate = xGetElementById('validate2'); validate.className = "form_button_hilight"; } } this.changed = true; }
with
var authorisedOptionsList = new Array('option1_value', 'option2_value', 'option3_value'); var authorisedOptionsListLabel = new Array('option1_label', 'option2_label', 'option3_label'); // in case the attribute name is the one that must be a select if (this.editAttributeNames[i] == 'the_field_name_that_must_be_a_dropdown') { var input = xCreateElement("select"); input.name = "edit_feature_" + aFeature.id + "[" + this.editAttributeNames[i] + "]" // for each options add an option element in the select for (var j = 0; j < authorisedOptionsList.length; j++){ input.options[j] = new Option(authorisedOptionsListLabel[j],authorisedOptionsList[j]); // if a value exist and that value equal the current option value, then set the option as selected if (typeof aFeature.attributes != "undefined" && aFeature.attributes[i] == authorisedOptionsList[j]) input.options[j].selected = true; } // insert the select into the td xAppendChild(td, input); // some background properties that need to be set, in the case of select, onchange events instead of onkeypress input.onchange = function() { if (!this.changed) { if (aFeature.operation != 'insert') setFeatureOperation(aFeature, "update"); var validate = xGetElementById('validate_all'); validate.className = "form_button_hilight"; if (editDisplayAction != 'folder'){ var validate = xGetElementById('validate2'); validate.className = "form_button_hilight"; } } } this.changed = true; } else { var input = createInput(td, "edit_feature_" + aFeature.id + "[" + this.editAttributeNames[i] + "]", value, 'text'); input.onkeypress = function() { if (!this.changed) { if (aFeature.operation != 'insert') setFeatureOperation(aFeature, "update"); var validate = xGetElementById('validate_all'); validate.className = "form_button_hilight"; if (editDisplayAction != 'folder'){ var validate = xGetElementById('validate2'); validate.className = "form_button_hilight"; } } this.changed = true; } }
In case you want multiple dropdown, use a switch to set the correct arrays
var found = false; switch (this.editAttributeNames[i]) { case 'attribute_to_find_1': var authorisedOptionsList = new Array('option1_value', 'option2_value', 'option3_value'); var authorisedOptionsListLabel = new Array('option1_label', 'option2_label', 'option3_label'); found = true; break; case 'attribute_to_find_2': var authorisedOptionsList = new Array('option1_value', 'option2_value', 'option3_value'); var authorisedOptionsListLabel = new Array('option1_label', 'option2_label', 'option3_label'); found = true; break; } // in case the attribute name is the one that must be a select if (found == true) { // same as above ...