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 3 of 3
  1. #1
    New Coder
    Join Date
    Apr 2014
    Posts
    20
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Select boxes not refreshing

    I have some javascript dropdown select boxes that I have created for a year make model search.

    The issue I am having is the information is being appended to the make dropdown and not refreshed with the new information.

    For example, the user selects 1990 in the year dropdown, then the make dropdown loads with the available makes for that year and then the model dropdown laods the appropriate models based on the selection in the make dropdown. Then if the user goes back and selects 1996 in the year dropdown, the make dropdown should refresh with only the makes available for that year.

    Currently, changing the year appends the newly selected years makes to the make dropdown, adding them to the previous selection.

    Here is my example on jsbin Untitled Document

    Here is my actual js code
    Code:
    var nLists = 3; // number of select lists in the set
    
    function fillSelect(currCat,currList){
    var step = Number(currList.name.replace(/\D/g,""));
    for (i=step; i<nLists+1; i++) {
    var ms = document.getElementById('model');
    ms.length=1;
    ms.selectedIndex=0;
    }
    var nCat = categories[currCat];
    for (each in nCat) {
    var nOption = document.createElement('option'); 
    var nData = document.createTextNode(nCat[each]); 
    nOption.setAttribute('value',nCat[each]); 
    nOption.appendChild(nData); 
    currList.appendChild(nOption); 
    } 
    }
    
    function getValue(L3, L2, L1) {
    alert("Your selection was:- \n" + L1 + "\n" + L2 + "\n" + L3);
    }
    
    function init() {
    fillSelect('startList',document.getElementById('year'));
    }
    function setupForm() {
    	var yearS = document.getElementById('year');
    	var makeS = document.getElementById('make');
    	var modelS = document.getElementById('model');
    	document.getElementById('find').value = yearS.options[yearS.selectedIndex].value + " " + makeS.options[makeS.selectedIndex].value + " " + modelS.options[modelS.selectedIndex].value; 
    }
    
    navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    Code:
    function fillSelect(currCat,currList){
     var step = Number(currList.name.replace(/\D/g,""));
     for (i=step; i<nLists+1; i++) {
      var ms = document.getElementById('model');
      ms.length=1;
      ms.selectedIndex=0;
     }
     currList.options.length=1;
     var nCat = categories[currCat];
     for (each in nCat) {
      var nOption = document.createElement('option');
      var nData = document.createTextNode(nCat[each]);
      nOption.setAttribute('value',nCat[each]);
      nOption.appendChild(nData);
      currList.appendChild(nOption);
    }
    }
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    jagsweb (05-15-2014)

  • #3
    New Coder
    Join Date
    Apr 2014
    Posts
    20
    Thanks
    7
    Thanked 0 Times in 0 Posts
    That did it. Thank you very much!


  •  

    Tags for this Thread

    Posting Permissions

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