在“提交”按钮后打开新标签并获取下拉菜单的数据

Question

I start learning JavaScript at the moment, I have the following code to generate a dropdown menu in a index.html file

<select id="secondbox" name="project">
    <option selected value="">---Generate---</option>
    <script src="myjs.js"> </script>
</select>

<input value="Submit" id="submit" type="submit"> </input>
<script>
// new tab here
$("input[type='submit']").click(function(){
    window.open('graph.html');
});
</script>

My script works well when generates the data within the drop-down menu. Now I am using submit button to open a New Tab with html file called "graph.html". The "graph.html' have the following code

    <div id="graph"> </div>
    <script src="getjs.js"> </script>

My JavaScript file is 'getjs.js' with a very basic function

$(function(){
    // this code works and display TEST NEW PAGE
    //$("#graph").append("<strong>TEST NEW PAGE</strong>");

    // not working
    var searchName=$("select[name='project']").val();
    alert(searchName);
});

I want an alert box appears such as "ProjectYZX' corresponding to the drop-down menu selected options in my 'index.html' file on my New Tab Page

Could anyone be able to give me any hints?

Thank you.

Updating part

    $.getJSON("mydata.json",function(data){
    var searchName=sessionStorage.getItem("myval");

    $.each(data,function(index,obj){
        for(var i in data.names){
            if(searchName==data.names[i].Name){
                alert(data.names[i].Name);
            }   
        }
    });
    });

Answer 1

You may try to store the value of your drop-down menu in sessionStorage , then retrieve it from your new window:

In your index.html :

<select id="secondbox" name="project">
    <option selected value="">---Generate---</option>
    <script src="myjs.js"> </script>
</select>

<input value="Submit" id="submit" type="submit"> </input>

<script>
$(function() {
    // Initialize the drop-down menu's value in sessionStorage
    sessionStorage.setItem("my_select_value", $("#secondbox").val());

    // Storing the drop-down menu's value in sessionStorage on change
    $("#secondbox").change(function() {
        sessionStorage.setItem("my_select_value", $(this).val());
    });


    // new tab here
    $("input[type='submit']").click(function(){
        window.open('graph.html');
    });
});
</script>

In your script getjs.js :

$(function(){
    // Retriving the drop-down menu's value from the sessionStorage
    var my_select_value = sessionStorage.getItem("my_select_value");
    alert(my_select_value);
});

Note: depending on your needs, you could also use localStorage instead of sessionStorage :)