fddcddhdd/pulldown.html

## 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>
	<!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>