CODEWITHSUNDEEP
javascripthtml-select
Milos Cuculovic
Milos Cuculovic

Reputation: 20223

Create unique option and then populate several selects with JavaScript

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.

Upvotes: 0

Views: 139

Answers (2)

vadim
vadim

Reputation: 1726

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

Upvotes: 1

Jan Hommes
Jan Hommes

Reputation: 5152

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

Upvotes: 1

Related Questions