Building HTML Selection field and selecting option with JavaScript Array

Question

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?

imtheman · Accepted Answer · 2015-03-26 22:36:55Z

1

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

answered Mar 26, 2015 at 22:36

imtheman

4,8631 gold badge32 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sukima · Accepted Answer · 2015-03-27 12:11:38Z

1

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;
}

edited Mar 27, 2015 at 12:11

answered Mar 26, 2015 at 23:03

Sukima

10.1k4 gold badges48 silver badges60 bronze badges

5 Comments

JasonDavis Over a year ago

Thanks for the alternative approach, I like it! Would you mind creating a simple JSFiddle example with this method please? I am not sure how the Array or data var would need to be formatted to pass into your dataToOptions(data) function

JasonDavis Over a year ago

Actually I figured it out thanks! jsfiddle.net/jasondavis/gcwwk58n I like the simplictity in it. It would be cool if I can somehow build the 2 functions into 1. Not your 2 functions but the 2 seperate Array types I have. I have some arrays like this that are Flat var typesArray = ['Other', 'SugarCRM', 'Magento', 'Design', 'Development', 'SEO', 'PHP']; which will not work in your example and then this type which works great!... var milestonesArray = [ ['1','Milestone 1'], ['2','milestone 2'], ]. Well technically that last array doesn't work as is but.......

JasonDavis Over a year ago

if I modify it for your function... var milestonesArray = [ ['1','Milestone 1'], ['2','milestone 2', 'selected'], ] which is a nice idea as well! I guess that last function var could probably be simple as a 1 or a true as well

JasonDavis Over a year ago

Actually on more thought, this might not work for me. It seems I would have to set my "selected" value in the actual Array which means a page with 100 Task records could not simply re-use the Array as the selected option would be part of the array...unless I am doing it wrong?

Sukima Over a year ago

Why not record the index of the selected elsewhere then test for that. I've edited my answer to reflect this case.

jFRAF · Accepted Answer · 2015-03-26 22:42:49Z

0

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]

answered Mar 26, 2015 at 22:42

jFRAF

313 bronze badges

Collectives™ on Stack Overflow

Building HTML Selection field and selecting option with JavaScript Array

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related