CODEWITHSUNDEEP
javascripthtml
heisenberg
heisenberg

Reputation: 1312

Select and option values

I have a few selects in my code, but they all have the same options:

<select id ="pais">
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
        <option value="D">D</option>
        <option value="E">E</option>
        <option value="F">F</option>
        <option value="G">G</option>
        <option value="H">H</option>
    </select>
    Localidade
    <select id ="localidade">
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
        <option value="D">D</option>
        <option value="E">E</option>
        <option value="F">F</option>
        <option value="G">G</option>
        <option value="H">H</option>
    </select>
    Morada
    <select id ="morada">
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
        <option value="D">D</option>
        <option value="E">E</option>
        <option value="F">F</option>
        <option value="G">G</option>
        <option value="H">H</option>
    </select>

Is there any simple why for me to not repeat the values every single time? like define one time and use them for all the other selects id?

I'm using javascript besides html by the way.

Upvotes: 1

Views: 355

Answers (5)

crypticfool
crypticfool

Reputation: 69

The following produces a numbered option select, within a table. @AirPun's answer is a more modern approach.

<tr>
    <td align="center" id="tableShow"></td> 
</tr>

function tableNumbers() {
    var i = 0;
    var selectText = "";
    selectText += '<select  name="tableNums" id="tableNum" size="1" onChange="storeTable()">' + "\n";
    for (i = 0; i<=20 ; i++) {
        selectText += "<option value="+'"'+i+'"'+">"+i+"</option>" + "\n";
        }
    selectText += "</select>";
    document.getElementById('tableShow').innerHTML = selectText;

}

Upvotes: 0

Terence
Terence

Reputation: 1374

Looped through the select elements to populate them. Have the static data defined in the function that adds each option element.

EDIT: Using the 'new Option' construct as A1rPun used, is a much better option than the createElement used here.

See fiddle

var selects = ["localidade", "pais"];
var selectLength = selects.length;
for(var s = 0; s < selectLength; s++) {
    addOptions(selects[s]);
}

function addOptions(selectName){
    var selectData = [{Key:'A',Value:'A'},{Key:'B',Value:'B'},{Key:'C',Value:'C'}];
    var sel = document.getElementById(selectName);
    if (sel != undefined) {
        var arrayLength = selectData.length;
        for (var i = 0; i < arrayLength; i++) {
            var opt = document.createElement('option');
            opt.text = selectData[i].Key;
            opt.value = selectData[i].Value;
            sel.add(opt);
        }
    }
}

Upvotes: 0

Nishant Kumar
Nishant Kumar

Reputation: 2169

make a array of value that is repeating and run a for loop inside select statement and assign value to value attribute of option tag through array value.

<body onload="myFunction()">

<select id="demo1">
</select>

<select id="demo2">
</select>
<script>
function myFunction()
{
    var select1 = document.getElementById("demo1");  
    var select2 = document.getElementById("demo2"); 
    var i=0;
    var val= ["A","B","C","D"];
    for(i=0;i<val.length ;i++){  
     select1.options[select1.options.length] = new Option(val[i],val[i]);  
     select2.options[select2.options.length] = new Option(val[i],val[i]);  

} 
}
</script>
</body>
</body>

Upvotes: 0

mazuno
mazuno

Reputation: 61

quick and easy: first empty your forms, just define them like that:

<select id ="morada"></select>

, same for the other ones, then :

var optionArray = ["A", "B", "C", "D", "E", "F"];
var strOut ="";
for(var i=0; i<optionArray.length;i++){
   strOut += '<option value=" ' + optionArray[i] + ' "> ' + optionArray[i] + '</option>';
}
$("#pais").html(strOut);
$("#morada").html(strOut);
$("#localidades").html(strOut);

EDIt: well it seems that A1rPun gave a better answer than me;)

Upvotes: 1

A1rPun
A1rPun

Reputation: 16847

I use this function to fill my selects:

function fillSelect(element, dataList){
    element = (typeof element === 'string' ? document.getElementById(element) : element);

    for (var i = 0; i < dataList.length; i++) {
        element.options[element.length] = new Option(dataList[i].Value, dataList[i].Key);
    }
}

Usage:

var selectData = [{Key:'A',Value:'A'},{Key:'B',Value:'B'},{Key:'C',Value:'C'}];
fillSelect('pais',selectData);
fillSelect('localidade',selectData);

Upvotes: 1

Related Questions