how to display an item from indexed array in a second dropdown

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • cretaceous
    New Member
    • Apr 2007
    • 5

    how to display an item from indexed array in a second dropdown

    Hi
    I'm a php/mysql developer and struggle when it comes to javascript !
    I've looked all over for a solution but am rubbish at adapting javascript

    I've got two select dropdowns in a form
    The first picks an item and the second needs to auto update to show which colours that item comes in

    (I've done it before by resubmitting the page with php via an auto submit - which is ugly)

    Ok - I've managed to convert all my colours into a multi dimensional javascript array, so it looks like:
    Code:
    colwayarray[22] = '<OPTION VALUE=18 >Daisy pink</OPTION><OPTION VALUE=17 >Pale aqua</OPTION>'; 
     colwayarray[26] = '<OPTION VALUE=22 >Sea splash</OPTION><OPTION VALUE=19 >Tangerine</OPTION>';
    the index value corresponds to the index value of the chosen item from the first select
    (the first select is built when the php builds the page )

    um - now I havent got a clue how to get the second dropdown to autopopulate when the first dropdown is changed with an
    onclick -
    I think it must be fairly simple ..
    I can access the required option string with this
    Code:
    <script language=javascript>
    document.write(colwayarray[66]);
    </script>
    but how do I put it in the select dropdown

    any help much appreciated !
    Last edited by cretaceous; Apr 25 '07, 01:41 PM. Reason: PS
  • cretaceous
    New Member
    • Apr 2007
    • 5

    #2
    oh no, my poor thread is going to be one of those unloved and lonely threads with no replies

    right I've got to this stage now:

    the first select does this:

    Code:
    <select name='match_garm' id='match_garm' onChange="changeText('match_garm');">
    the top of the page js is:

    Code:
    <script type="text/javascript">
    function changeText(elemid) {
    var ind = document.getElementById(elemid).selectedindex;
    document.getElementById("m_cway").innerHTML=colwayarray[ind];
    document.getElementById("m_cway2").innerHTML=colwayarray[ind];
    }
    </script>
    the two items changed are for testing - m_cway is the second select, m_cway2 is just a div to show if its getting anything

    now when I change the first select my test div displays "undefined"

    but if I hard code the function with an index number like so:
    Code:
    document.getElementById("m_cway").innerHTML=colwayarray[54];
    document.getElementById("m_cway2").innerHTML=colwayarray[54];
    then both items work perfectly.. - the select populates and the div reads out the text

    what am I doing wrong?

    Comment

    • cretaceous
      New Member
      • Apr 2007
      • 5

      #3
      isnt it wonderful how typing the qusetion often makes you think again..

      I did this :

      var ind = document.getEle mentById(elemid ).value;

      and it works

      Comment

      • cretaceous
        New Member
        • Apr 2007
        • 5

        #4
        hi - need to bump my question again

        the above solution works in Firefox but does not work in IE 6 - the (php generated) js array seems to be working ok - I just cant get the select to populate with an element of it

        I'd be really grateful for any suggestions at all !
        Last edited by cretaceous; May 2 '07, 10:30 PM. Reason: edit

        Comment

        • acoder
          Recognized Expert MVP
          • Nov 2006
          • 16032

          #5
          Sorry no-one had a look at your thread. I was a bit busy last week.

          See this link.

          Comment

          • cretaceous
            New Member
            • Apr 2007
            • 5

            #6
            sorted
            headerjs:
            Code:
            var ind = document.getElementById('match_garm').value;
            var wrapdiv = document.getElementById("wrapdiv");
            wrapdiv.innerHTML = "<select name='m_cway' id='m_cway'>"+colwayarray[ind]+"</select>";
            then wrap the second select in a div with the id wrapdiv

            Comment

            • iam_clint
              Recognized Expert Top Contributor
              • Jul 2006
              • 1207

              #7
              wow sorry I didn't see your post I coulda had a solution to you pretty quck.

              Comment

              Working...