A.html
<select id="comboA">
<option value="1">選択肢1</option>
<option value="2">選択肢2</option>
<option value="3">選択肢3</option>
</select>
<select id="comboB">
</select>
javascript
$(function() {
$('#comboA').change(function() {
// 選択された値を取得
var selectedValue = $(this).val();
// サーバーにデータを送信してコンボボックスBの選択肢を再編集する
$.ajax({
url: 'getComboBOptions.php',
type: 'POST',
data: {selectedValue: selectedValue},
dataType: 'html',
success: function(response) {
$('#comboB').html(response);
},
error: function(xhr, textStatus, error) {
console.log(xhr.statusText);
console.log(textStatus);
console.log(error);
}
});
});
});
getComboBOptions.php
<?php
// コンボボックスBの選択肢を生成する
$selectedValue = $_POST['selectedValue'];
$options = '';
if ($selectedValue == 1) {
$options .= '<option value="1-1">選択肢1-1</option>';
$options .= '<option value="1-2">選択肢1-2</option>';
} elseif ($selectedValue == 2) {
$options .= '<option value="2-1">選択肢2-1</option>';
$options .= '<option value="2-2">選択肢2-2</option>';
} elseif ($selectedValue == 3) {
$options .= '<option value="3-1">選択肢3-1</option>';
$options .= '<option value="3-2">選択肢3-2</option>';
}
// コンボボックスBの選択肢を返す
echo $options;
?>