在不提交POST请求的情况下更改第一个选项I、IV和V时,如何更改为情况1或情况2?
<select name="vrsta_predmenta">
<option value="1">I</option>
<option value="2">IV</option>
<option value="3">V</option>
</select>
<select name="izvrsenje">
<?php
switch($_POST['vrsta_predmenta']){
case 1:
echo '<option value="1">Prvo izvrsenje</option>';
echo '<option value="2">Drugo izvrsenje</option>';
echo '<option value="3">Trece izvrsenje</option>';
break;
case 2:
echo '<option value="1">Cetvrto izvrsenje</option>';
echo '<option value="2">Peto izvrsenje</option>';
echo '<option value="3">Sesto izvrsenje</option>';
break;
}
?>
</select>
您将需要javascript。这里有一个非常简单的方法示例,当您已经将所有选项都隐藏起来,并且根据主选择框中所选的选项显示必要的选项时。
var main = document.querySelector('.main'),
secondary = document.querySelector('.secondary');
main.onchange = function() {
var mainValue = main.options[main.selectedIndex].value;
[].slice.call(secondary.options).forEach(function(option) {
option.hidden = option.className !== 'value-' + mainValue;
});
secondary.options[0].hidden = false;
secondary.options[0].selected = true;
};
<select name="vrsta_predmenta" class="main">
<option value="1">I</option>
<option value="2">IV</option>
<option value="3">V</option>
</select>
<select name="izvrsenje" class="secondary">
<option value="">-- Select --</option>
<option value="1" class="value-1" hidden>Prvo izvrsenje</option>
<option value="2" class="value-1" hidden>Drugo izvrsenje</option>
<option value="3" class="value-1" hidden>Trece izvrsenje</option>
<option value="1" class="value-2" hidden>Cetvrto izvrsenje</option>
<option value="2" class="value-2" hidden>Peto izvrsenje</option>
<option value="3" class="value-2" hidden>Sesto izvrsenje</option>
</select>
您目前正在混合html和php。
为了满足您的需要,您需要在html页面中实现javascript。您的代码将无法工作,因为php在服务器端,而不是在客户端。
你可以试试这个
<select name="vrsta_predmenta" id='sendRequest'>
<option value="1" >I</option>
<option value="2">IV</option>
<option value="3">V</option>
</select>
jQuery('#sendRequest').change(function(){
jQuery.ajax({
url:'your php file url',
type:'post',
data:{data:jQuery(this).val()},
dataType:'JSOON',
success:function(){
}
})
})