试图以编程方式设置选择选项值不工作

Question

我试图以编程方式将选择列表选项值设置为被选中。

<script> 
       if(typeof localStorage.me !== "undefined") { 
        console.log("test"); 
        $("#business").val(localStorage.me); 
       } 
       if(typeof localStorage.partner !== "undefined") { 
        $("#partner-business").val(localStorage.partner); 
       } 

       $("#page-main").on("change", "#business", function(event) { 
        localStorage.setItem("me", $("#business").val()); 
       }); 
       $("#page-main").on("change", "#partner-business", function(event) { 
        localStorage.setItem("partner", $("#partner-business").val()); 
       }); 
      </script> 
      <div class="content" data-role="content"> 
       <div data-role="fieldcontain"> 
        <h3 class="select center-h3">I am a:</h3> 
        <select name="business" id="business"> 
         <option value="technical">Technical</option> 
         <option value="sales">Sales</option> 
        </select> 
       </div> 
       <div data-role="fieldcontain"> 
        <h3 class="select center-h3">My partner is a:</h3> 
        <select name="partner-business" id="partner-business"> 
         <option value="technical">Technical</option> 
         <option value="sales">Sales</option> 
        </select> 
       </div> 
    </div> 

我想根据选项值来设置它，但这似乎不起作用。

如何通过选项值设置它，而不是选项标签内的名称？

Answer 1

您需要将代码包装在document-ready处理程序中。除了你的代码工作。

指定一个函数在DOM完全加载时执行。

$(document).ready(function() { 
    //Your code 
}); 

DEMO

Answer 2

这里是做同样的事情，用$(this)代替查询DOM，以供将来参考的简化方法。

if(localStorage.me) $("#business").val(localStorage.me); 
if(localStorage.partner) $("#partner-business").val(localStorage.partner); 

$("#business").on("input", function() { 
    localStorage.me = $(this).val(); 
}); 
$("#partner-business").on("input", function() { 
    localStorage.partner = $(this).val(); 
});