Skip to content

Instantly share code, notes, and snippets.

@fddcddhdd

fddcddhdd/pulldown.html

Created January 5, 2016 08:56
Show Gist options
  • Save fddcddhdd/040bd242f0ce0af4c051 to your computer and use it in GitHub Desktop.
Save fddcddhdd/040bd242f0ce0af4c051 to your computer and use it in GitHub Desktop.
Download ZIP
jQueryで第一希望～第三希望までの連動プルダウンを作ってみた(初期値あり、上位の希望が選ばれたら下位プルダウンは自動的に選択)
Raw
pulldown.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>連絡先の第三希望まで選択肢を減らしていくサンプル</title>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(function() {
$("#優先順位１").change(function() {
// 現状を取得
var first_selected = $('#優先順位１ option:selected').attr("value");
// 二番目の選択肢の数だけループ
for (var i=0; i<$('#優先順位２').children().length; i++) {
// 二番目の選択肢のオブジェクトを取得
var second = $('#優先順位２ option:eq(' + i + ')');
// 既に選ばれてたら、第二選択肢には表示しない
if(first_selected == second.attr("value")) {
second.hide();
// 未選択なら表示。
}else {
second.show();
second.prop('selected',true);
}
}
// 第二選択肢変更時のイベントも起こして、第三選択肢も変更する
$('#優先順位２').trigger("change");
})
$("#優先順位２").change(function() {
// 現状を取得
var first_selected = $('#優先順位１ option:selected').attr("value");
var second_selected = $('#優先順位２ option:selected').attr("value");
// 三番目の選択肢の数だけループ
for (var i=0; i<$('#優先順位３').children().length; i++) {
// 三番目の選択肢のオブジェクトを取得
var third = $('#優先順位３ option:eq(' + i + ')');
// 既に選ばれてたら、第三選択肢には表示しない
if(first_selected == third.attr("value") || second_selected == third.attr("value")) {
third.hide();
// 未選択なら表示。
}else {
third.show();
third.prop('selected',true);
}
}
})
// OnChange発火させないと、初期で選択肢が制限されない
$("#優先順位１").val('会社').trigger("change");
$('#優先順位２').val('携帯').trigger("change");
$('#優先順位３').val('自宅').trigger("change");
})
</script>
</head>
<body>
連絡先(携帯・会社・自宅)の第一希望～第三希望を選択する時なんかに便利です。
住所の都道府県・市区・町村なんかとは違って、同じ選択肢から上位で選ばれた物を削除していくイメージですね。
ググッてもあまりイイ感じのサンプルが無かったので、自分で組んでみた。
<form action="" method="post">
優先順位１
<select id="優先順位１" name="優先順位１">
<option value="会社" selected>会社</option>
<option value="携帯">携帯</option>
<option value="自宅">自宅</option>
</select>
優先順位２
<select id="優先順位２" name="優先順位２">
<option value="会社">会社</option>
<option value="携帯" selected>携帯</option>
<option value="自宅">自宅</option>
</select>
優先順位３
<select id="優先順位３" name="優先順位３">
<option value="会社">会社</option>
<option value="携帯">携帯</option>
<option value="自宅" selected>自宅</option>
</select>
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment