パラメータを渡してのページ遷移 #HTML

ページ遷移をする時にパラメータを渡す方法と受け取る方法です。

元のページ　aa01.html

クリックして遷移したページ bb01.html

ページのソース

aa01.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="button_click_monitor.js"></script>
<title>aa01</title>
</head>
<body>
<button id='m_500'>500 M</button>
<button id='m_1000'>1000 M</button>
<button id='m_1500'>1500 M</button>
<button id='m_3000'>3000 M</button>
<hr />
<div id="outarea_aa">outarea_aa</div>
<div id="outarea_bb">outarea_bb</div>
<div id="outarea_cc">outarea_cc</div>
<div id="outarea_dd">outarea_dd</div>
<div id="outarea_ee">outarea_ee</div>
<div id="outarea_ff">outarea_ff</div>
<div id="outarea_gg">outarea_gg</div>
<div id="outarea_hh">outarea_hh</div>
<hr />
Feb/15/2018<p />
</body>
</html>

button_click_monitor.js

// -------------------------------------------------------------------
//  button_click_monitor.js
//
//                  Feb/15/2018
//
// -------------------------------------------------------------------
jQuery(function()
{
    jQuery('#outarea_aa').text("*** button_click_monitor.js *** start ***")

    button_click_monitor ()

    jQuery('#outarea_hh').text("*** button_click_monitor.js *** end ***")
})

// -------------------------------------------------------------------
// [8]:
function button_click_monitor ()
{
    jQuery ("button").click (function ()
        {
        window.location.href = "bb01.html" + "?id=" + this.id
        })
}

// -------------------------------------------------------------------

遷移先のページ

bb01.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="bb01.js"></script>
<title>bb01</title>
</head>
<body>
<select id="category" name="種目">
    <option value="">種目をお選びください</option>
    <option value="m_500">500 M</option>
    <option value="m_1000">1000 M</option>
    <option value="m_1500">1500 M</option>
    <option value="m_3000">3000 M</option>
</select>
<hr />
<div id="outarea_aa">outarea_aa</div>
<div id="outarea_bb">outarea_bb</div>
<div id="outarea_cc">outarea_cc</div>
<div id="outarea_dd">outarea_dd</div>
<div id="outarea_ee">outarea_ee</div>
<div id="outarea_ff">outarea_ff</div>
<div id="outarea_gg">outarea_gg</div>
<div id="outarea_hh">outarea_hh</div>
<hr />
Feb/15/2018<p />
</body>
</html>

bb01.js

// -------------------------------------------------------------------
//  bb01.js
//
//                  Feb/15/2018
//
// -------------------------------------------------------------------
function getParam()
{
    var url   = location.href
    parameters    = url.split("?")
    params   = parameters[1].split("&")
    var paramsArray = []
    for ( it = 0; it < params.length; it++ ) {
        neet = params[it].split("=")
        paramsArray.push(neet[0])
        paramsArray[neet[0]] = neet[1]
        }
    var categoryKey = paramsArray["id"]
    return categoryKey
}

// -------------------------------------------------------------------
jQuery(function()
{
    jQuery('#outarea_aa').text("*** bb01.js *** start ***")

    const idx = getParam()

    var str_tmp = ""
    str_tmp += "Getパラメータ「id」の値は、"+  idx  +" です。<br />"
    jQuery('#outarea_bb').html(str_tmp)

    const value = idx

    jQuery("#category").val(value)

    jQuery('#outarea_hh').text("*** bb01.js *** end ***")
})

// -------------------------------------------------------------------