CODEWITHSUNDEEP
javascriptarrays
JasonDavis
JasonDavis

Reputation: 48933

Building HTML Selection field and selecting option with JavaScript Array

I have some JavaScript Arrays that are used to generate HTML selection fileds and then to also make the option a user has selected as the selected opton in the generated Selection list.

I have a working example for a basic JavaScript array. I need help with a more complex JS array though.

function buildFormSelection(optionArray, selectedOption){
    var optionsHtml = '';
    for(var i = 0; i < optionArray.length; i++){
        optionsHtml += "<option value='" + optionArray[i] + "' "
        + (selectedOption == optionArray[i] ? "selected='selected'" : "")
        + ">" + optionArray[i] + "</option>";
    }
    return optionsHtml;
};

var typesArray = ['Other', 'SugarCRM', 'Magento', 'Design'];

console.log(buildFormSelection(typesArray, 'SugarCRM'));

This generates this HTML output... 

<option value='Other'>Other</option>
<option value='SugarCRM' selected='selected'>SugarCRM</option>
<option value='Magento'>Magento</option>
<option value='Design'>Design</option>

Here is a JSFiddle to show it working. http://jsfiddle.net/jasondavis/4twd8oz1/

My issue is I now need to have the same functionality on a more complex array like this one below. It has an ID and a Name Value... 

var milestonesArray = [
  ['1','Milestone 1'],
  ['2','milestone 2'],
]

Using similar code as my function above, I need to pull in a user's selected value from a database for example if they have saved the value of 2 then it should select selection option of 2 and show the text milestone 2 from a selection that looks like this...

<option value='1'>milestone 1</option>
<option value='2' selected='selected'>milestone 2</option>

I am not sure how to properly build a JavaScript array that can handle a key and value like this and make my function work with the milestone array.

Any help please?

Upvotes: 0

Views: 115

Answers (3)

Sukima
Sukima

Reputation: 10074

Answers with lots of code is usually frowned on but this is a trivial solution as @imtheman pointed out in his answer. But not everything needs to be so concise.

function makeOptionElement(value, title, selected) {
  var option = document.createElement('option');
  option.value = value;
  if (selected) {
    option.setAttribute('selected', 'selected');
  }
  option.innerHTML = title;
  return option;
}

function dataToOptions(data, selectedIndex) {
  var selectList = document.createElement('select');
  data.forEach(function(item, index) {
    var isSelected = (index === selectedIndex);
    var option = makeOptionElement(item[0], item[1], isSelected);
    selectList.appendChild(option);
  });
  return selectList;
}

Upvotes: 1

jFRAF
jFRAF

Reputation: 31

Essentially, each time you call the array with your variables to be printed, you are calling the contents of the array in the position specified between the [ ]. It may be another array. That you can access as you would any other array. So, it would be:external_array[extrenal_array_index][internal_array_index]

Upvotes: 0

imtheman
imtheman

Reputation: 4843

What you need to do just add another array index to your function like so:

function buildFormSelection(optionArray, selectedOption){
    var optionsHtml = '';
    for(var i = 0; i < optionArray.length; i++){
        optionsHtml += "<option value='" + optionArray[i][0] + "' "
        + (selectedOption == optionArray[i][0] ? "selected='selected'" : "")
        + ">" + optionArray[i][1] + "</option>";
    }
    return optionsHtml;
};

Where optionArray[i][0] is the value and optionArray[i][1] is the text.

JSFiddle

Upvotes: 1

Related Questions