Warning: file_get_contents(/data/phpspider/zhask/data//catemap/4/oop/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Jquery 在“选择事件重写数据”列表上_Jquery_Jquery Select2 - Fatal编程技术网

Jquery 在“选择事件重写数据”列表上

Jquery 在“选择事件重写数据”列表上,jquery,jquery-select2,Jquery,Jquery Select2,我有两个“从”和“到”下拉列表字段。我只想当从数字选择重写到数字列表数据时,其中的数字多于从数值数字。当从“数字列表”中重写“选择的数字”时,返回相同的值,其中“数字”小于“选择的值” 我正在创建三个事件: 1从所选项目开始,事件仅第一次工作,其余时间工作不正确 2对项目所选事件,同一工作链接仅第一次,其余时间工作不正确 3关于重置所有数据列表但工作不正确的从项目清除事件:仅重置到数据列表,从数据列表仅清除 html代码: <select id="formadditional-age_fr

我有两个“从”和“到”下拉列表字段。我只想当从数字选择重写到数字列表数据时,其中的数字多于从数值数字。当从“数字列表”中重写“选择的数字”时,返回相同的值,其中“数字”小于“选择的值”

我正在创建三个事件:

1从所选项目开始,事件仅第一次工作,其余时间工作不正确

2对项目所选事件,同一工作链接仅第一次,其余时间工作不正确

3关于重置所有数据列表但工作不正确的从项目清除事件:仅重置到数据列表,从数据列表仅清除

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');
    });
为什么我的代码工作不正确

    <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
    });
});

请参阅,以获得一个更干净的解决方案,该解决方案足以实现您的目标。感谢@Haris的评论,您的代码确实是一个很好的解决方案。没问题,只需将其粘贴为答案,以便于访问