Question

下面我有一个车辆下拉列表，它将从文本文件中提取新选项。在页面更改为正确的类别页面后，我还没有找到保存所选TEXT值的方法。所以最终我将下拉列表更改为一个div，将所选的下拉列表显示为文本。

那么我该怎么做..

一个。在页面重新加载后保留下拉值和文本值。

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>

Answer 1

您可以使用几种选项，正如评论中已经提到的那样。

使用localStorage在本地可访问的页面加载中保存所需的数据位（因此名称为：p）。您可以在MDN上阅读更多相关信息：https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
在网址中使用查询参数，因此请标记?item1=val1&item2=val2或其中的某些变体。
使用哈希标记附加数字类似于数字2，但它实际上并没有发送到服务器。示例：#item1=asdasd,item2=valasd2。

您还可以对对象进行字符串化并将JSON存储在URL等中

Answer 2

change <select>事件localStorage

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

并在DOM准备就绪，您可以将其恢复为

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

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

如果你有更多像

这样的项目，你可以制作json对象

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

window.location后如何存储数据？

2 个答案: