0

i really need help i have a code that you can select from a drop down menu you can select types of shirts and color. it works great on the first page. i have the same exact code for my second page i want to be able to display the same shirt type and color on the second page but i would like to know if its possible to pre select the options and show the same shirt on the second page by using the same information that was selected from the first page. i have been having lots of trouble getting the code REMEMBER the code is exactly the same on the second page and on the first page. 

function fctCheck(gender) {
  var elems = document.getElementsByName("subselector");
  for (var i = 0; i < elems.length; i++) {
    elems.item(i).style.display = "none";
  }
  document.getElementById(gender).style.display = "block";
}


$('#men').on('change', function() {
  $("#mtsm").css('display', (this.value == 'tsm') ? 'block' : 'none');
});



$(document).ready(function() {
  $('.colore.active').each(function() {
    $('.container ').css('background-image', 'url(' + $(this).data("image") + ')');
  });
  $('.colore').on('click', function() {
    $('.container').css('src', '');
    $('.container ').css('background-image', 'url(' + $(this).data("image") + ')');
    $('.container7').css('background-image', 'url(' + $(this).data("image-back") + ')');
  });
  $('#toggler').click(function() {
    var tmp = $('.container').css('background-image');
    $('.container').css('background-image', $('.container7').css('background-image'));

    $('.container7').css('background-image', tmp);
  });
});
<select id="Gender" onchange="fctCheck(this.value);">
        <option value="">Choose Gender</option>
        <option value="men">Men</option>
        <option value="wemen">Wemen</option>
        <option value="girls">Girls</option>
        <option value="boys">boys</option>
    </select>  
    <br>
       <br>
    <select id="men" name="subselector" style="display:none">
      <option value="">Choose an item</option> 
      <option value="tsm">T-Shirt</option>
      <option value="lsm">long sleeve</option>
     <option value="tankm">Tank Top</option>
     <option value="fzhm">Full zip Hood</option>
     <option value="pohm">Pull over Hood</option>
     <option value="fzfm">Full zip Fleece</option>
     <option value="fm">Fleece</option>
    </select>  
 
    
    <select id="wemen" name="subselector" style="display:none">
        <option value="slw">short sleeve</option>
 
    </select>  
    
     <select id="girls" name="subselector" style="display:none">
        <option value="shortsg">shorts</option>
        
    </select>  
 <select id="boys" name="subselector" style="display:none">
        <option value="tshirtb">tshirt</option>
       
    </select>  
     <div style='display:none;' id="wsl">
                       <div class="colore white" data-image="https://opensource.org/files/osi_keyhole_300X300_90ppi.png">
                </div>
                <div class="colore black" data-image="http://mebe.co/ford">
                </div>
                <div class="colore yellow" data-image="http://mebe.co/f150">
                </div>
                <div class="colore orange" data-image="http://mebe.co/yukon">
                </div>
                <div class="colore red" data-image="http://mebe.co/370z">
                </div>
            </div>
            
              <div style='display:none;' id="mtsm">
    <div class="colore white active" data-image="http://torcdesign.com/shirts/white.jpg" data-image-back="http://amp.site88.net/shirts/whiteback.jpg">
    </div>
    <div class="colore black" data-image="http://torcdesign.com/shirts/black.jpg" data-image-back="http://amp.site88.net/shirts/whiteback.jpg">
    </div>
    <div class="colore yellow" data-image="http://torcdesign.com/shirts/yellow.jpg" data-image-back="http://amp.site88.net/shirts/orange.jpg">
    </div>
    <div class="colore orange" data-image="http://torcdesign.com/shirts/orange.jpg" data-image-back="http://amp.site88.net/shirts/yellow.jpg">
    </div>
    <div class="colore red" data-image="http://torcdesign.com/shirts/red.jpg" data-image-back="http://amp.site88.net/shirts/black.jpg">
    </div>
  </div>
loose my mind
  • 57
  • 7
  • From a pure HTML stand-point this is impossible. You would need to add some java script to create cookies or use a query string parameter to remember a previous choice. – dckuehn Aug 30 '16 at 20:51
  • You might wanna send the selected options from first page to second page as query string parameters and intercept those value as property selected="selected" in the option tag – DinoMyte Aug 30 '16 at 20:52
  • @DinoMyte do you happen to know where i can see an example of how its done? – loose my mind Aug 30 '16 at 20:53
  • http://stackoverflow.com/questions/647259/javascript-query-string – DinoMyte Aug 30 '16 at 20:54
  • @dckuehn i tried using LocalStorage but that did not work at all would do you know how i can do cookies – loose my mind Aug 30 '16 at 20:55

0 Answers0