セレクトボックスの連動と情報の保持について

こういった場所に初めて投稿致します。
質問のしかたなどに失礼が有りましたら申し訳ありません。

今回ページAに「名古屋会場の申し込み」「東京会場の申し込み」「大阪会場の申し込み」と他3つほど同じような会場申込みんボタンが有り、
例えば「名古屋会場の申し込み」ボタンをクリックしてぺーじBに移動するとセレクトボックスに名古屋会場の情報「地域」「日時」「場所」がセットされた状態で表示されるようになっています。

今回ネットで調べて連動するスクリプトを見つけたのですが、valueの値でセレクトボックスの連動を紐付けているため、メールフォームに使用することができませんでした。そこで、色々調べたところHTML5のカスタムデータ属性で何とかできないかと思いoptionにdata-area="エリア名"とかで連動を紐付けれないかと思いました。ただ、スクリプトをどういじればいいのかわからないので、お力を貸して頂けませんでしょうか。

わかりづらい文章で申し訳ありませんが、どうか宜しくお願い致します。

lang
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3<head>
4    <meta charset="UTF-8" />
5	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
6    <script type="text/javascript">
7        function getdata(){
8            if(window.location.search){
9                var n=window.location.search.substring(1,window.location.search.length);
10            };
11            document.getElementById('area').options[n].selected = true;
12            document.getElementById('area2').options[n].selected = true;
13            document.getElementById('area3').options[n].selected = true;
14        }
15        window.onload=getdata;
16    </script>
17    
18    <script type="text/javascript">
19        $(function(){
20            $('.pulldown').change(function(){
21							//おそらく↓↓↓↓↓↓をいじればいいのではと思ってますが、どういじればいいかわかりません。
22                $('.pulldown').val($(this).val());
23            });
24        });
25    </script>
26</head>
27<body>
28<form name="mailform" id="mailform" method="post" action="mailformpro/send.cgi" onsubmit="return falsesubmit(this)" accept-charset="UTF-8">
29    <select id="area" name="会場" class="pulldown">
30        <option data-area="名古屋" value="名古屋会場">名古屋会場</option>
31        <option data-area="東京都" value="東京会場">東京会場</option>
32        <option data-area="大阪府" value="大阪会場">大阪会場</option>
33    </select>
34     
35    <select id="area2" name="日時" class="pulldown">
36        <option data-area="名古屋" value="1月10日10：00">1月10日10：00</option>
37        <option data-area="東京都" value="1月20日10：00">1月20日18：00</option>
38        <option data-area="大阪府" value="1月24日10：00">1月24日7：00</option>
39    </select>
40
41    <select id="area3" name="場所" class="pulldown">
42        <option data-area="名古屋" value="愛知県名古屋市北区3-5-10プリンセスホテル">愛知県名古屋市北区3-5-10プリンセスホテル</option>
43        <option data-area="東京都" value="東京都港区4-5東急イン">東京都港区4-5東急イン</option>
44        <option data-area="大阪府" value="大阪府梅田5-5東横イン">大阪府梅田5-5東横イン</option>
45    </select>
46
47</form>
48</body>
49</html>

行動規範の内容に同意します

回答1件

ベストアンサー

lang
1$(document).ready(function () {
2    $('.pulldown').change(function() {
3        var dataArea = $(this).find(':selected').attr('data-area');
4        var $allOptions = $('.pulldown option');
5        var $options = $allOptions.filter('[data-area=' + dataArea + ']');
6
7        $allOptions.attr('selected', false);
8        $options.attr('selected', true);
9    });
10});