jquery - 在选择事件重写数据列表
问题描述
我有两个“发件人”和“收件人”下拉号码列表字段。我只想在选择“来自”数字时重写“到”数字列表数据,其中数字大于“来自”值的数字。从“选择“选择重写”的“数字列表”中的“数字”列表少的数字然后选择“到”值时,相同的背包。
我正在创建三个事件:
1)从项目选择事件仅第一次工作,其余时间工作不正确
2)对项目选择的事件相同的workink只有第一次,其余时间工作不正确
3)从项目清除事件中重置所有数据列表但工作不正确:仅重置“to”数据列表,“from”数据列表只是清除。
html代码:
<select id="formadditional-age_from" class="form-control"
name="FormAdditional[age_from]">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<select id="formadditional-age_to" class="form-control" name="FormAdditional[age_to]">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
jQuery代码:
const select2Conf = {
allowClear: true,
minimumResultsForSearch: -1,
width: 200
},
age_to_item = $('#formadditional-age_to'),
age_from_item = $('#formadditional-age_from'),
age_option_list = $('option', age_from_item).clone();
age_from_item.select2({
...select2Conf,
placeholder: 'From',
});
age_to_item.select2({
...select2Conf,
placeholder: 'To',
});
age_from_item.on('select2:select', function(e){
let data = e.params.data,
val = age_to_item.val();
age_to_item
.html(age_option_list.filter(o => age_option_list[o].value === '' || parseInt(age_option_list[o].value)>=parseInt(data.id)))
.val(val).trigger('change');
});
age_to_item.on('select2:select', function(e){
let data = e.params.data,
val = age_from_item.val();
age_from_item
.html(age_option_list.filter(o => age_option_list[o].value === '' || parseInt(age_option_list[o].value)<=parseInt(data.id)))
.val(val).trigger('change');
});
age_from_item.on('select2:clearing', function(e){
$(this)
.html(age_option_list)
.val("").trigger('change');
age_to_item
.html(age_option_list)
.val("").trigger('change');
});
https://jsfiddle.net/bemulima/18mkrbe2/21/
为什么我的代码工作不正确?
解决方案
<select class="form-control" name="from">
<option value="">Choose</option>
<option value="1000">1000 cc</option>
<option value="1200">1200 cc</option>
<option value="1400">1400 cc</option>
<option value="1600">1600 cc</option>
<option value="1800">1800 cc</option>
<option value="2000">2000 cc</option>
<option value="2500">2500 cc</option>
<option value="3000">3000 cc</option>
<option value="3500">3500 cc</option>
<option value="4000">4000 cc</option>
</select>
<select class="form-control" name="to">
<option value="">Choose</option>
<option value="1000">1000 cc</option>
<option value="1200">1200 cc</option>
<option value="1400">1400 cc</option>
<option value="1600">1600 cc</option>
<option value="1800">1800 cc</option>
<option value="2000">2000 cc</option>
<option value="2500">2500 cc</option>
<option value="3000">3000 cc</option>
<option value="3500">3500 cc</option>
<option value="4000">4000 cc</option>
</select>
// jQuery //
$('select[name=from]').on('change', function(){
var self = this;
$('select[name=to]').find('option').prop('disabled', function(){
return this.value && this.value < self.value && self.value
});
});
$('select[name=to]').on('change', function(){
var self = this;
$('select[name=from]').find('option').prop('disabled', function(){
return this.value && this.value > self.value && self.value
});
});
推荐阅读
- angular - Angular 8 - 扩展 DevExpress 库的数据网格
- c - 如何添加互斥锁和条件变量来保证这种行为?
- unity3d - 统一玩家移动,速度不固定
- java - 在创建对象时生成 UUID 作为 Id,而不是使用 @GeneratedValue
- java - 从 CalenderView 禁用星期五
- java - Spring JPA Repository - jsonObject 上的运算符 SIMPLE_PROPERTY 需要标量参数
- r - 所选列与 R 中 data.frame 的其余部分之间的相关性
- snaplogic - 在 snaplogic 中执行 python 脚本
- python - 在 python 模块中创建用于测试的 xml 文件
- python - python上的树递归