在javascript中添加选择onChange函数
在javascript中添加选择onChange函数
提问于 2022-06-07 19:17:44
这是我的HTML代码
<div class="form-group col-md-12">
<label for="inputPassword4">Category</label>
<select name="cat" id="cat" class="form-control">
<option value=" ">Choose Category</option>
@foreach ($cat as $data)
<option value="{{ $data->id }}">{{ $data->cname }}</option>
@endforeach
</select>
</div>
<div id="serv"></div>
<div id="repair"></div>这是我的javascript代码，在这段代码中，第一个很好，即#serv块，但第二个是#修复部分，它不工作的onChange，所以请帮助e。
<script>
$('#cat').change(function() {
if (this.value == 6 || this.value == 7) {
$('#serv').append(`<div class="form-group col-md-12">
<label for="inputEmail4">Service</label>
<select class="form-control" id="servic" name="serv" required>
<option value=" ">Choose Services</option>
<option value="service">Service</option>
<option value="repair">Repair</option>
<option value="installation">Installation</option>
<option value="uninstallation">Uninstallation</option>
</select>
</div>`);
}
else
$('#serv').empty();
});下面这个座没有工作，请帮助我。
$('#servic').change(function() {
console.log('in');
if (this.value == 'repair') {
$('#repair').append(`<div class="form-group col-md-12">
<label for="inputEmail4">Repair</label>
<select class="form-control" id="repar" name="rep" required>
<option value="power_issue">Power Issue</option>
<option value="less_cooling">Less Cooling</option>
<option value="water_leakage">Water Leakage</option>
</select>
</div>`);
}
else
$('#repair').empty();
});
</script>回答 3
Stack Overflow用户
发布于 2022-06-07 19:37:33
首先，在加载页面时，DOM中没有一个带有id "service“的元素。这样你的活动就不受约束了。您应该将第二个事件放到第一个if条件中。就像这样：
$('#cat').change(function() {
if (this.value == 6 || this.value == 7) {
$('#serv').append(`<div class="form-group col-md-12">
<label for="inputEmail4">Service</label>
<select class="form-control" id="servic" name="serv" required>
<option value=" ">Choose Services</option>
<option value="service">Service</option>
<option value="repair">Repair</option>
<option value="installation">Installation</option>
<option value="uninstallation">Uninstallation</option>
</select>
</div>`);
$('#servic').change(function() {
console.log('in');
if (this.value == 'repair') {
$('#repair').append(`<div class="form-group col-md-12">
<label for="inputEmail4">Repair</label>
<select class="form-control" id="repar" name="rep" required>
<option value="power_issue">Power Issue</option>
<option value="less_cooling">Less Cooling</option>
<option value="water_leakage">Water Leakage</option>
</select>
</div>`);
}
else
$('#repair').empty();
});
}
else
$('#serv').empty();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-md-12">
<label for="inputPassword4">Category</label>
<select name="cat" id="cat" class="form-control">
<option value="">Choose Category</option>
<option value="6">value is 6</option>
</select>
</div>
<div id="serv"></div>
<div id="repair"></div>
Stack Overflow用户
发布于 2022-06-07 19:32:59
您正在动态地创建带有id "servic“的select，所以只有在将其附加到#serv之后，才需要附加更改处理程序。
if (this.value == 6 || this.value == 7) {
$('#serv').append(`...`);
$('#servic').change(function() {
// listener code...
});
}Stack Overflow用户
发布于 2022-06-07 19:45:37
$('#cat').change(function() {
if (this.value == 6 || this.value == 7) {
$('#serv').append(`<div class="form-group col-md-12">
<label for="inputEmail4">Service</label>
<select class="form-control" id="servic" name="serv" required>
<option value=" ">Choose Services</option>
<option value="service">Service</option>
<option value="repair">Repair</option>
<option value="installation">Installation</option>
<option value="uninstallation">Uninstallation</option>
</select>
</div>`);
$('#servic').change(function() {
console.log('in');
if (this.value == 'repair') {
$('#repair').append(`<div class="form-group col-md-12">
<label for="inputEmail4">Repair</label>
<select class="form-control" id="repar" name="rep" required>
<option value="power_issue">Power Issue</option>
<option value="less_cooling">Less Cooling</option>
<option value="water_leakage">Water Leakage</option>
</select>
</div>`);
}
else
$('#repair').empty();
});
}
else
$('#serv').empty();
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72536507
复制相关文章
相似问题
腾讯云开发者
