提问者:小点点

Javascript文件的选项值返回未定义


嗨,我有以下问题。 我希望用户选择一个选择面板的选项。 然后,在他单击按钮之后,他被带到另一个文件,在那里,他选择的值被放在一个变量中,然后显示出来。 重要的是,它是在一个新文件中打开的。 但在我的代码中,变量返回未定义。 下面是我的代码:

null

function myFunction() {
  a=$("#mySelect").val();
  switch(a){
    case "Orange":
    var b="Orange";
    return b;
    case "Apple":
    var b="Apple";
    return b;
    case "Pineapple":
    var b="Pineapple";
    return b;
    case "Banana":
    var b="Banana";
    return "Banana";
}
}
var test=myFunction();
$("button").on("click",blub);
function blub(){
  window.open(
"/Users/Adrian/Desktop/jj.html",
'_blank' 
);
}
<!DOCTYPE html>
<html>
 <body>
  <select id="mySelect">
   <option value="Apple">
Apple
   </option>
   <option value="Orange">
Orange
   </option>
   <option value="Pineapple">
Pineapple
   </option>
   <option value="Banana">
Banana
   </option>
  </select>
  <p class="bla">
   Click the button to select the option element with index "2".
  </p>
  <p>
   <b>
Note:
   </b>
   The index starts at 0.
  </p>
  <button>
   Try it
  </button>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
  </script>
  <script charset="utf-8" src="j.js">
  </script>
  <script charset="utf-8" src="jj.js">
  </script>
 </body>
</html>

null

null

$(".bla").html(test);
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <p class="bla"></p>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="j.js" charset="utf-8"></script>
    <script src="jj.js" charset="utf-8"></script>
  </body>
</html>

null


共1个答案

匿名用户

您应该只在单击按钮时才获取select的值,而不是在页面加载时获取。 然后,您可以在SessionStorage中设置它,以便另一个页面可以访问它。

第一页的JavaScript:

$("button").on("click", blub);

function blub() {
    sessionStorage.setItem("value", $('#mySelect').val());
    window.open(
        "/Users/Adrian/Desktop/jj.html",
        '_blank'
    );
}

第二页的JavaScript:

$(".bla").text(sessionStorage.getItem('value'));