我有一个html选择框,我将根据先前选择框的选择附加新选项。在添加新选项之前,我需要清空选择框,以便仅显示所需的选项。
该附件工作正常并且选项可以更改,并且可以从“ 2nd_incident”选择框中进行选择,但是,当我合并.empty()时,这些选项仍会根据我的需要进行更改,但是当您实际尝试从中选择它们时选择框中的值保持不变。
将值登录到控制台可确认该值已更改,但外观没有变化。
我也尝试用.html()代替.empty()和.append(),但这也有相同的问题。
$("#load_section3").change(function() {
var first_incident = document.getElementById('1st_incident').value;
var second_incident = document.getElementById('2nd_incident');
console.log(second_incident.value);
if (first_incident == 1) {
//remove na and input options into next select box
$('#2nd_incident').empty().end();
$('#2nd_incident').append('<option > Please Select </option>' +
'<option > something1 </option>' +
'<option > something2 </option>' +
'<option > something3 </option>' +
'<option > something3 </option>');
} else if (first_incident == 2) {
$('#2nd_incident').empty().append('<option> Please Select </option>' +
'<option> somethings1 </option>' +
'<option> somethings2 </option>' +
'<option> somethings3 </option>');
} else {
$('#2nd_incident').empty();
$('#2nd_incident').append('<option> NA </option>');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="load_section3">
<select class="inputs" id="1st_incident">
<option> 1 </option>
<option> 2 </option>
<option> 3 </option>
</select>
<select class="inputs" id="2nd_incident">
<option value="Test">NA</option>
</select>
</div>
任何帮助都会很感激,因为我觉得自己已经使用了几个星期了。
答案 0 :(得分:0)
浏览完代码后,我发现每次您在selectbox中选择值时,它都会检查条件,并根据条件更新选择框。因此,这里可能是您解决问题的方法。您只应在第一个选择框的更改事件中将值填充到第二个选择框
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="load_section3">
<select class="inputs" id="1st_incident">
<option> 1 </option>
<option> 2 </option>
<option> 3 </option>
</select>
<select class="inputs" id="2nd_incident">
<option value="Test">NA</option>
</select>
</div>
<script>
$("#1st_incident").change(function(){
if (this.value == 1) {
//remove na and input options into next select box
$('#2nd_incident').empty().end();
$('#2nd_incident').append('<option > Please Select </option>' +
'<option > something1 </option>' +
'<option > something2 </option>' +
'<option > something3 </option>' +
'<option > something3 </option>');
} else if (this.value == 2) {
$('#2nd_incident').empty().append('<option> Please Select </option>' +
'<option> somethings1 </option>' +
'<option> somethings2 </option>' +
'<option> somethings3 </option>');
} else {
$('#2nd_incident').empty();
$('#2nd_incident').append('<option> NA </option>');
}
});
</script>
<body>
<html>