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

Discussion in 'Javascript' started by Nick, Nov 23, 2005.

  1. Nick

    Nick Guest

    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>
    Nick, Nov 23, 2005
    #1
    1. Advertising

  2. Nick

    Matt Kruse Guest

    Matt Kruse, Nov 23, 2005
    #2
    1. Advertising

  3. Nick

    RobG Guest

    Nick wrote:
    > 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>

    [...]


    --
    Rob
    RobG, Nov 23, 2005
    #3
  4. Nick

    Nick Guest

    Thank Matt, ill try guessing which better ways to solve the problem.
    -Nick
    Nick, Nov 23, 2005
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Cliff  Martin
    Replies:
    1
    Views:
    3,013
    Larry Smith
    Jan 31, 2007
  2. jacksu
    Replies:
    0
    Views:
    492
    jacksu
    Oct 9, 2007
  3. linkswanted
    Replies:
    1
    Views:
    864
  4. Utkado
    Replies:
    2
    Views:
    2,037
  5. Bryan Richardson
    Replies:
    6
    Views:
    265
    Bryan Richardson
    Feb 25, 2008
Loading...

Share This Page