JavaScriptでフォーム(contact.html)のSelectboxを選択したときに、それぞれに違った内容のチェックボックスを表示させたものがあります。
別ページ(index.html)などからフォーム(contact.html)へ遷移したときに遷移元に沿ったselectboxが選択されている状態までは作れているのですが、その時にそれぞれに違った内容のチェックボックスが表示されません。
trigger で試したのですが、やはり上手くはいかずご教示いただけたらと思います。
以下に、ソースコードを記載します。
index.html
<body>
<div class="contact">
<p><a href="contact.html?id=01">お問い合わせはこちら</a></p>
</div>
<script src="contact.js" type="text/javascript" charset="utf-8"></script>
<script src="service.js" type="text/javascript" charset="utf-8"></script>
</body>
contact.html
<body>
<form action="submit.php" method="POST">
<dl>
<dt class="first"><span class="necessary">必須</span>お問い合わせ項目</dt>
<dd>
<select id="othersInquiry" name="othersInquiry" class="multipicklist required" size="1" tabindex="30">
<optgroup label="">
<option value="" data-select="check-none">選択してください</option>
<option value="選択01" data-select="check-01">選択01</option>
<option value="選択02" data-select="check-02">選択02</option>
<option value="選択03" data-select="check-03">選択03</option>
<option value="選択04" data-select="check-04">選択04</option>
</optgroup>
</select>
</dd>
</dl>
<dl class="naiyoBox">
<dt><span>任意</span>サービス内容<br>(複数選択可)</dt>
<dd>
<div class="check-01">
<label class="label-type1"><input type="checkbox" name="selectName_c[]" value="選択01-01" class="input-a"><span>選択01-01</span></label>
<label class="label-type1"><input type="checkbox" name="selectName_c[]" value="選択01-02" class="input-a"><span>選択01-02</span></label>
</div>
<div class="check-02">
<label class="label-type1"><input type="checkbox" name="selectName_c[]" value="選択02-01" class="input-a"><span>選択02-01</span></label>
<label class="label-type1"><input type="checkbox" name="selectName_c[]" value="選択02-02" class="input-a"><span>選択02-02</span></label>
</div>
</dd>
</dl>
<div>
<input id="save" name="save2" type="submit" value="送信する" />
</div>
</form>
<script src="contact.js" type="text/javascript" charset="utf-8"></script>
<script src="service.js" type="text/javascript" charset="utf-8"></script>
</body>
service.js
$(function(){
var arg = new Object;
url = location.search.substring(1).split('&');
for(i=0; url[i]; i++) {
var k = url[i].split('=');
arg[k[0]] = k[1];
}
var id = arg.id;
var list = {
'01':'check-01',
'02':'check-02',
'03':'check-03',
'04':'check-04',
}
var list_id = list[id];
$("#othersInquiry").val(list_id);
$('.contact').on('click', function() {
// ここにtriggerを試してみました
})
});
contact.js
function changeSelect(){
var val = $('#othersInquiry option:selected').attr('data-select');
$('.naiyoBox').hide();
console.log(val);
if(val == 'check-01' || val == 'check-02'){
$('.naiyoBox').show();
}
$('.naiyoBox input').prop('checked', false);
$('.naiyoBox').addClass('show');
if (val == '#othersInquiry') return;
$('.naiyoBox dd div').removeClass('select');
$('div.' + val ).addClass('select');
}
$(document).on('change', '#othersInquiry', changeSelect);