Answer: How to auto generate new list options...

Nick · Nov 23, 2005

In case anyone in is need...

<html>
<head>
<script language="javascript">
function getStates () {
stateCodes = new Array('AK','AL','AR','CA','CO','CT','DC','ETC');
for (var stateOptions='',$i=0; $i < stateCodes.length; $i++) {
stateOptions = stateOptions + "<option value=\"" + stateCodes[$i] +
"\">" + stateCodes[$i] + "</option>";
}
return stateOptions;
}
function addStateOption () {
var stateCount =
parseInt(document.getElementById('stateCounter').value) + 1;
for (emptyField=false, i=1; i < stateCount; i++) {
if (document.getElementById('s' + i).value == '') {
emptyField = true;
document.getElementById('s' + i).style.backgroundColor = "#FFFFD9";
} else {
document.getElementById('s' + i).style.backgroundColor = "#FFFFFF";
}
}
if (emptyField != true) {
document.getElementById('states').innerHTML =
document.getElementById('states').innerHTML
+ "<select id='s" + stateCount + "' name='s" + stateCount + "'>"
+ "<option value=''>Select State</option>"
+ getStates()
+ "</select>"
+ "<br>";
document.getElementById('stateCounter').value = stateCount;
}
}
</script>
</head>
<body>
<div id="states"></div>
<a href="javascript:addStateOption();">Add State</a>
<input id="stateCounter" type="hidden" value="0">
</body>
</html>

Matt Kruse · Nov 23, 2005

Nick said:
In case anyone in is need...

Prepare to be roasted

Check the FAQ at http://www.jibbering.com/faq/ to see that some parts of
your code are not recommended practices.
Also, there are better ways to solve the problem you appear to be trying to
solve.

RobG · Nov 23, 2005

Nick said:
In case anyone in is need...

[...]

But first try:

<script type="text/javascript">

function addStateOptions(f){

if ( !document.createElement
|| typeof Option == 'undefined' ){
return;
}

var stateCodes = ['AK','AL','AR','CA','CO','CT','DC','ETC'];
var sel = document.createElement('select');
var sc;
for (var i=0, len=stateCodes.length; i<len; ++i){
sc = stateCodes
sel.options[sel.options.length] = new Option(sc, sc);
}
f.appendChild(sel);
f.stateCounter.value = i;
}

</script>

<div id="states"></div>
<form action="">
<input id="stateCounter" type="hidden" value="0">
<input type="button" value="Add states"
onclick="addStateOptions(this.form)"</form>

[...]

Nick · Nov 23, 2005

Thank Matt, ill try guessing which better ways to solve the problem.
-Nick

Multi select options in a menu	1	Oct 30, 2022
How to display input options only after selecting an option from the 'select class' tag JS?	6	May 12, 2023
How to save JSON Data to a file using fetch() api?	2	Apr 28, 2022
Need Help, Both submit button works same, i need both submit button works differently, the one button override other button	3	Nov 9, 2022
New to coding - image to the time of day based on time	2	May 14, 2022
How to treat an input data as variable?	4	Apr 13, 2023
I am trying to make an audio player, how do I get the selected file to be playable?	5	Mar 29, 2022
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023

Answer: How to auto generate new list options...

Nick

Matt Kruse

RobG

Nick

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads