List > Select > Options

This article provides an example of how to work with html select tag within a list. The list is shown as a simple buttons accordion of values, in this case state names. The select tag will contain the cities of each state.

set a variable to the body

let body = document.body;

sample data: used javascript arrays, used same data for simplicity

let usaStates   = ['Illinois', 'Indiana',      'Wisconsin',    'Iowa', 
                   'Florida', 'California',  'Washington', 'Oklahoma',
                   'Texas', 'South Dakota', 'North Dakota',  'New York',
                   'South Carolina'];

let stateCities = ['Select state', 'chicago', 'Aurora', 'Waukegan',
                   'Lave Zurich', 'Long Grove'];

declared global variables

var cityNameSelected  = '';
var cityIndexSelected = -1;
var stateNameSelected = '';

Created a function to display the city name and the city index within the select tag .

getCityAndIndex = (city, index) => {
    cityNameSelected = city;
    cityIndexSelected = index;
    let texto = `Selected: state: ${stateNameSelected}   city: ${cityNameSelected}   found at location: ${cityIndexSelected}`;   
    let para = document.getElementById('valores');
    para.textContent = texto;
    return {city, index};
}

Created a function to create elements at body level.

addWrapper = (elemName,  elemClass, elemId, elemContent) => {
    let element = document.createElement(elemName);
    element.classList.add(elemClass);
    element.id = elemId;
    element.textContent = elemContent;
    body.appendChild(element);
}

Created a function to create html elements at a given parent level.

addElement = (parentId, elemName,  elemClass, elemId, elemContent) => {
    let element = document.createElement(elemName);
    element.classList.add(elemClass);
    element.id = elemId;
    element.height = '150px';
    element.textContent = elemContent;
    let parent = document.getElementById(parentId); // get parent
    parent.appendChild(element);
}

Created a function to add the following elements.

createButtonPanelSelectElements = () => {
    for (let i = 0; i < usaStates.length; i++ )
    { 
        addElement('outer-wrapper', 'button',  'accordion', 'btn-' + i,  usaStates[i]);

        addElement('outer-wrapper', 'panel',  'panel', 'panel-' + i, '');

        addElement('panel-' + i, 'select', 'select', 'select-' + i, '');
    }
}

example of output of each function call in the above function.

 addElement('outer-wrapper', 'button',  'accordion', 'btn-' + i,  usaStates[i]);

  The above code line will produce:
        //<body>
        ///////    <button id='btn'+i  class= 'accordion'  value= usaStates[i]  >
        ///////    </button>
        //</body>

addElement('outer-wrapper', 'panel',  'panel', 'panel-' + i, '');

 The above code line will produce:
        //<body>
        //        <button id='btn-'+i  class= 'accordion'  value= usaStates[i]  >
        //        </button>
        //       
        ///////        <panel id='panel-'+i class='panel'>
        ///////        </panel>
        // 
        // </body>

addElement('panel-' + i, 'select', 'select', 'select-' + i, '');

 The above code line will produce:
        //<body>
        //        <button id='btn-'+i  class= 'accordion'  value= usaStates[i]  >
        //        </button>
        //       
        //        <panel id='panel-'+i class='panel'>
        ///////             <select id='select-'+i  class='Select'>
        // ////             </select>   
        //        </panel>
        //
        // </body>

Created a function to populate the select tag options

addoptionsToSelect = () => {
    for (let i = 0; i < usaStates.length; i++ )
    { 
        for (let j = 0; j < stateCities.length; j++)
        {
            addElement('select-' + i, 'option', 'option', 'option-' + j, stateCities[j]);
        }
    }
}

addoptionsToSelect function will produce:
        //<body>
        //        <button id='btn-'+i  class= 'accordion'  value= usaStates[i]  >
        //        </button>
        //       
        //        <panel id='panel-'+i class='panel'>
        //             <select id='select-'+i  class='Select'>
        ///////                   <option class="option" id="option-0">Select City</option> 
        ///////                   <option class="option" id="option-1">chicago</option> 
        ///////                   .
        ///////                   .
        ///////                   <option class="option" id="option-100">Vernon Hills</option> 
        //             </select>   
        //        </panel>
        //
        // </body>

Created functions to hook Panel, Select to Button events.

Created functions to hook Panel to mouseover and mouseout events.

Created function to populate city and index from getCityIndex function

Calling sequence

addWrapper('div', 'wrapper', 'outer-wrapper', '');
createButtonPanelSelectElements();
addoptionsToSelect();
hookPanelSelectToButton();
hookPanelToMouseoutAndMouseOver();
cityAndIndexValues();

Please se live code below:

https://codepen.io/srueda/pen/MWeyKLY

Thank you for reading this article.

Let's Connect

Next article will be: undecided.

List with a Select tag