Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jun 2006
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Dynamic Drop-down List Question

    Hi All,

    Got this script from: http://javascript.internet.com/forms...opulation.html, and it works, but not as I expected it would. When I pass the selection to my ASP page, it sends the numeric value and not the string value. What do I need to change to pass the string value?

    Thanks!
    Dale

    Code:
    <HEAD>
    
    <script type="text/javascript">
    <!--
    
    var arrItems1 = new Array();
    var arrItemsGrp1 = new Array();
    
    arrItems1[3] = "Truck";
    arrItemsGrp1[3] = 1;
    arrItems1[4] = "Train";
    arrItemsGrp1[4] = 1;
    arrItems1[5] = "Car";
    arrItemsGrp1[5] = 1;
    
    arrItems1[6] = "Boat";
    arrItemsGrp1[6] = 2;
    arrItems1[7] = "Submarine";
    arrItemsGrp1[7] = 2;
    
    arrItems1[0] = "Planes";
    arrItemsGrp1[0] = 3;
    arrItems1[1] = "Ultralight";
    arrItemsGrp1[1] = 3;
    arrItems1[2] = "Glider";
    arrItemsGrp1[2] = 3;
    
    var arrItems2 = new Array();
    var arrItemsGrp2 = new Array();
    
    arrItems2[21] = "747";
    arrItemsGrp2[21] = 0
    arrItems2[22] = "Cessna";
    arrItemsGrp2[22] = 0
    
    arrItems2[31] = "Kolb Flyer";
    arrItemsGrp2[31] = 1
    arrItems2[34] = "Kitfox";
    arrItemsGrp2[34] = 1
    
    arrItems2[35] = "Schwietzer Glider";
    arrItemsGrp2[35] = 2
    
    arrItems2[99] = "Chevy Malibu";
    arrItemsGrp2[99] = 5
    arrItems2[100] = "Lincoln LS";
    arrItemsGrp2[100] = 5
    arrItems2[57] = "BMW Z3";
    arrItemsGrp2[57] = 5
    
    arrItems2[101] = "F-150";
    arrItemsGrp2[101] = 3
    arrItems2[102] = "Tahoe";
    arrItemsGrp2[102] = 3
    
    arrItems2[103] = "Freight Train";
    arrItemsGrp2[103] = 4
    arrItems2[104] = "Passenger Train";
    arrItemsGrp2[104] = 4
    
    arrItems2[105] = "Oil Tanker";
    arrItemsGrp2[105] = 6
    arrItems2[106] = "Fishing Boat";
    arrItemsGrp2[106] = 6
    
    arrItems2[200] = "Los Angelas Class";
    arrItemsGrp2[200] = 7
    arrItems2[201] = "Kilo Class";
    arrItemsGrp2[201] = 7
    arrItems2[203] = "Seawolf Class";
    arrItemsGrp2[203] = 7
    
    function selectChange(control, controlToPopulate, ItemArray, GroupArray) {
      var myEle ;
      var x ;
      // Empty the second drop down box of any choices
      for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
      if (control.name == "firstChoice") {
        // Empty the third drop down box of any choices
        for (var q=form.thirdChoice.options.length;q>=0;q--) form.thirdChoice.options[q] = null;
     }
      // ADD Default Choice - in case there are no values
      myEle = document.createElement("option") ;
      myEle.value = 0 ;
      myEle.text = "[SELECT]" ;
      // controlToPopulate.add(myEle) ;
      controlToPopulate.appendChild(myEle)
      // Now loop through the array of individual items
      // Any containing the same child id are added to
      // the second dropdown box
      for ( x = 0 ; x < ItemArray.length  ; x++ ) {
        if ( GroupArray[x] == control.value ) {
          myEle = document.createElement("option") ;
          //myEle.value = x ;
          myEle.setAttribute('value',x);
          // myEle.text = ItemArray[x] ;
          var txt = document.createTextNode(ItemArray[x]);
          myEle.appendChild(txt)
          // controlToPopulate.add(myEle) ;
          controlToPopulate.appendChild(myEle)
        }
      }
    }
    
    function selectChange(control, controlToPopulate, ItemArray, GroupArray) {
      var myEle ;
      var x ;
      // Empty the second drop down box of any choices
      for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
      if (control.name == "firstChoice") {
        // Empty the third drop down box of any choices
        for (var q=form.thirdChoice.options.length;q>=0;q--) form.thirdChoice.options[q] = null;
      }
      // ADD Default Choice - in case there are no values
      myEle=document.createElement("option");
      theText=document.createTextNode("[SELECT]");
      myEle.appendChild(theText);
      myEle.setAttribute("value","0");
      controlToPopulate.appendChild(myEle);
      // Now loop through the array of individual items
      // Any containing the same child id are added to
      // the second dropdown box
      for ( x = 0 ; x < ItemArray.length  ; x++ ) {
        if ( GroupArray[x] == control.value ) {
          myEle = document.createElement("option") ;
          //myEle.value = x ;
          myEle.setAttribute("value",x);
          // myEle.text = ItemArray[x] ;
          var txt = document.createTextNode(ItemArray[x]);
          myEle.appendChild(txt)
          // controlToPopulate.add(myEle) ;
          controlToPopulate.appendChild(myEle)
        }
      }
    }
    // -->
    </script>
    </HEAD>
    
    
    <BODY>

    And here's the HTML for it:

    Code:
    <form name=form>
    <table align="center">
      <tr>
        <td>
          <select id="firstChoice" name="firstChoice" onchange="selectChange(this, form.secondChoice, arrItems1, arrItemsGrp1);">
            <option value="0" selected>[SELECT]</option>
            <option value="1">Land</option>
            <option value="2">Sea</option>
            <option value="3">Air</option>
          </select>
        </td><td>
          <select id="secondChoice" name="secondChoice" onchange="selectChange(this, form.thirdChoice, arrItems2, arrItemsGrp2);">
          </select>
          <select id="thirdChoice" name="thirdChoice">
          </select>
        </td>
      </tr>
    </table>
    </form>

  • #2
    Regular Coder mic2100's Avatar
    Join Date
    Feb 2006
    Location
    Scunthorpe
    Posts
    562
    Thanks
    15
    Thanked 28 Times in 27 Posts
    hi,

    you need to change the following code

    Code:
      for ( x = 0 ; x < ItemArray.length  ; x++ ) {
        if ( GroupArray[x] == control.value ) {
          myEle = document.createElement("option") ;
          //myEle.value = x ;
          myEle.setAttribute('value',x);
          // myEle.text = ItemArray[x] ;
          var txt = document.createTextNode(ItemArray[x]);
          myEle.appendChild(txt)
          // controlToPopulate.add(myEle) ;
          controlToPopulate.appendChild(myEle)
        }
    to....
    Code:
      for ( x = 0 ; x < ItemArray.length  ; x++ ) {
        if ( GroupArray[x] == control.value ) {
          myEle = document.createElement("option") ;
          //myEle.value = x ;
          myEle.setAttribute('value',ItemArray[x]);
          // myEle.text = ItemArray[x] ;
          var txt = document.createTextNode(ItemArray[x]);
          myEle.appendChild(txt)
          // controlToPopulate.add(myEle) ;
          controlToPopulate.appendChild(myEle)
        }
    This will now set the values of the dropdown box to the text value instead of a number.

    myEle.setAttribute('value',x);

    change to

    myEle.setAttribute('value',ItemArray[x]);

    I hope this helps.

  • #3
    New Coder
    Join Date
    Jun 2006
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, I tried your suggestion but I'm still getting the numeric value. Any other suggestions?

    Dale
    Last edited by dalezjc; 12-27-2007 at 08:03 PM. Reason: Change

  • #4
    New Coder
    Join Date
    Jun 2006
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Bump.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •