2016-01-28 28 views
1

下面我有一个车辆下拉菜单,它将从文本文件中提取新的选项。在页面切换到正确的分类页面后,我还没有找到一种方法来保存这些选定的TEXT值。所以最终我将下拉菜单改为了一个将显示所选下拉菜单的div。如何在window.location之后存储数据?

那么,如何既..

A.保持页面重新加载后的下拉值和文本值。

B.保持选定的文本和适当的div显示

任何帮助,非常感谢!

HTML:

<div id="shop_vehicle_container"> 
    <div id="shop_vehicle"> 
     <div id="bl_firstRow">      
        <div id="vehic_sel"> 
        <div class="sel_label"> 
        <div class="sel_label"> 
         Shop By Vehicle: 
        </div> 
       </div> 
       <div class="sel_container"> 
        <select id="vehic_sel_model"> 
         <option value="">Choose Model</option> 
         <option value="17Prelude">Prelude</option> 
         <option value="21Civic">Civic</option> 
         <option value="22CRX">CRX</option> 
         <option value="23CivicdelSol">Civic del Sol</option> 
         <option value="18Accord">Accord</option> 
         <option value="20Odyssey">Odyssey</option> 
         <option value="24Element">Element</option> 
         <option value="26Pilot">Pilot</option> 
         <option value="16Passport">Passport</option> 
         <option value="15CR-V">CR-V</option> 
         <option value="19S2000">S2000</option> 
         <option value="25Insight">Insight</option> 
         <option value="29Accord Crosstour">Accord Crosstour</option> 
         <option value="31Crosstour">Crosstour</option> 
         <option value="30CR-Z">CR-Z</option> 
         <option value="27Ridgeline">Ridgeline</option> 
         <option value="28Fit">Fit</option> 
        </select> 
        <select disabled ="" id="vehic_sel_year"> 
        <option value="">Choose Year</option> 
        </select> 
        <select disabled= "" id="vehic_sel_trim" onchange="VehicPaste()"> 
         <option value="">Choose Trim Level</option> 
        </select> 
<script src="/v/js.js"></script>  
<script src="/v/Fade to New DIv.js"></script> 
<script src="/v/OpenSecondRow.js"></script> 
<script> 
function VehicPaste() { 
    var Vehicle =document.getElementById('vehic_sel_model').options[document.getElementById('vehic_sel_model').selectedIndex].text + " "+document.getElementById('vehic_sel_year').options[document.getElementById('vehic_sel_year').selectedIndex].text+ " "+ document.getElementById('vehic_sel_trim').options[document.getElementById('vehic_sel_trim').selectedIndex].text; 
    document.getElementById("VehicleMessage").innerHTML = "Honda " + Vehicle; 
} 
</script> 
</div> 
</div> 
</div> 
<div id="vehic_submit" style= "display: none"> 
<div id="VehicleMessage"></div> 
<input id = "changeVehic" type="image" src="/v/changevehicle_btn.gif.png"> 
<script> 
$(document).ready(function() { 
    $("#changeVehic").click(function(){ 
     $('#vehic_submit').fadeOut(0, function() { 
      $('#bl_firstRow').html($('#bl_firstRow').html()); 
      $('#bl_firstRow').fadeIn(0); 
     }); 
    }) 
}); 
</script> 
         </div> 
      <div class="clearfloat"> 
      </div> 
<br> 
     <div id="bl_secondRow" style="display:none"> 
      <div id="vehic_sel2"> 
       <div class="sel_label"> 
        <div class="sel_label"> 
         Shop By Category: 
        </div> 
       </div> 
           <div class="sel_container"> 
        <select id="vehic_sel_section"> 
         <option value="">Choose Engine</option> 
        </select> 
<script> 
    $(function goto(){ 
     $('#vehic_sel_section').on('change', function() { 
      var url = "/SearchResults.asp?Cat="+document.getElementById('vehic_sel_section').value 
      if (url) { 
       window.location = url; 
} 
     }); 
    }); 
</script> 
</div> 
+4

更多的项目,你应该检查'localStorage'你应该检查http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage –

+0

@ParthTrivedi你应该做出答案! – GMaiolo

+0

如果您想要更好的浏览器支持,或者如果您不介意使用服务器端代码,那么您也可以将数据作为参数添加到网址中作为#hastag。 – seahorsepip

回答

1

change<select>事件时,可以localStorage

localStorage.setItem('select_vehic_sel_model', JSON.stringify($(this).val())); 

DOM准备好,你可以拿回来as

var retrievedObject = localStorage.getItem('select_vehic_sel_model'); 

if(retrievedObject!=undefined && retrievedObject!=null){ 
    $("#vehic_sel_model").val(retrievedObject); 
} 

You c一个让json对象,如果您有像

var json = { 
"select_vehic_sel_model":"<value>", 
"textbox":"<value>", 
"div_status":"hide", 
} 
1

有几个可用的选项给你一些在评论中已经指出。

  1. 使用localStorage保存您在页面加载是本地访问需要的数据位(因此得名:P)。您可以在MDN上阅读更多关于它的信息:https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

  2. 在URL中使用查询参数,因此标记?item1=val1&item2=val2或其一些变体。

  3. 使用散列标签将数据类似地附加到数字2,但它实际上不会发送到服务器。例如:#item1=asdasd,item2=valasd2

您也可以字符串化一个对象并存储JSON的URL等