Create unique option and then populate several selects with JavaScript

Question

I am populating several selects with JavaScript. For some of them, the select option is the same so I have thought about creating one option and then populating all the concerning selects.

Here is how I am doing actually:

var option = document.createElement('option');
    option.text = 'please select a journal';
    option.value ='NULL';

    try 
    {
        selectSection.add(option, null);  // standards compliant; doesn't work in IE
    }
    catch(ex) 
    {
        selectSection.add(option);  // IE only
    }

    var option = document.createElement('option');
    option.text = 'please select a journal';
    option.value ='NULL';

    try 
    {
        selectSpecialIssue.add(option, null);  // standards compliant; doesn't work in IE
    }
    catch(ex) 
    {
        selectSpecialIssue.add(option);  // IE only
    }

    var option = document.createElement('option');
    option.text = 'please select a journal';
    option.value ='NULL';

    try 
    {
        selectVolume.add(option, null);  // standards compliant; doesn't work in IE
    }
    catch(ex) 
    {
        selectVolume.add(option);  // IE only
    }

                    .............ETC................

I have tried to create only one option (options are the sames) and then populating those selects:

var option = document.createElement('option');
    option.text = 'please select a journal';
    option.value ='NULL';

    try 
    {
        selectSection.add(option, null);
                    selectSpecialIssue.add(option, null);
                    selectVolume.add(option, null);
    }
    catch(ex) 
    {
        selectSection.add(option);
                    selectSpecialIssue.add(option);
                    selectVolume.add(option);
    }

The code is here much nicer and easier to understand but the problem is that only my last select (selectVolume) is populated, I don't know why.

Jan Hommes · Accepted Answer · 2012-08-08 06:44:55Z

1

I think it's because you don't initalize the option object new. So you append the element to each slection, but there is only one object of the option, so it must be removed at the other selection. A better way is to do this inside a function:

function setOptionJournal(selection) {
  var option = document.createElement('option');
  option.text = 'please select a journal';
  option.value ='NULL';

  try 
  {
    selection.add(option, null);
  }
  catch(ex) 
  {
    selection.add(option);
  }
}
setOptionJournal(selectSection);
setOptionJournal(selectSpecialIssue);
setOptionJournal(selectVolume);

answered Aug 8, 2012 at 6:44

Jan Hommes

5,1626 gold badges37 silver badges47 bronze badges

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

1 Comment

Milos Cuculovic Over a year ago

Great, I haven't thinked about a function. This resolved the problem I havd. Thank you very much.

vadim · Accepted Answer · 2012-08-08 06:52:54Z

1

You can move option creation to function

function createOption(text, value) {
            var option = document.createElement('option');
            option.text = text;
            option.value = value == null ? 'NULL' : value;  

            return option;
        }

and write you code like that

            var selectSection = document.getElementById('selectSection');
            var selectSpecialIssue = document.getElementById('selectSpecialIssue');
            var selectVolume = document.getElementById('selectVolume');

            var selectText ='please select a journal';

            selectSection.add(createOption(selectText));
            selectSpecialIssue.add(createOption(selectText));
            selectVolume.add(createOption(selectText));

This will be much cleaner

answered Aug 8, 2012 at 6:52

vadim

1,7261 gold badge10 silver badges19 bronze badges

1 Comment

Milos Cuculovic Over a year ago

Thank you vadim, it's allmost the same answer as given by @Jan Hommes. That's eyactly what I need. Thank's a lot.

Collectives™ on Stack Overflow

Create unique option and then populate several selects with JavaScript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related