如何链接jQuery onchange事件呢?

时间:2018-03-16 02:06:14

标签: jquery

input#one
input#two
input#three

$('#one').change(function() {
  $('#two').val('change_by_one');
});

$('#two').change(function() {
  $('#three').val('changed');
});

我想链接更改事件,因此当我更改#one时,它会更改#two然后#three ... 我试过了

$('#one').change(function() {
  $('#two').val('change_by_one');
  // at this point, the changed value of `#two` is not rendered yet, resulting some invalid state.
  $('#two').trigger('change'); 
});

任何想法如何实现?连锁事件

==============更新=============== 我的问题的一个更好的例子是:

<select id="organisation">
    <option value="org1">org1</option>
    <option value="org2">org2</option>
</select>

<select id='media'>
</select>

<input placeholder="get the selected media"/>

var $media = $('#media');
$('#organisation').change(function() {
  var options = [];
  setTimeout(function() {
    $media.append('<option value="image" data-type="image">image</option>');
    $media.append('<option value="first" data-type="video">video</option>');
  }, 1000);
    $media.change();
});

$('#media').change(function() {
  $('input').val($('#media').val());
});

选择组织执行ajax调用以获取它的媒体文件,并在媒体选择中呈现选项,我只想在组织更改时触发媒体字段的一些onchange事件。

我举了一个例子。 https://jsfiddle.net/rht3Lxav/

=============解决方案==========

var $media = $('#media');

$('#organisation').change(function() {
  var options = [];
    AddOptions().then(function() {
        $media.change();
    });
});

$('#media').change(function() {
  $('input').val($('#media').val());
});

function AddOptions() {
    return new Promise(function(resolve, reject) {
    setTimeout(function() {
    $media.find('option').remove().end();
        $media.append('<option value="image" data-type="image">image</option>');
        $media.append('<option value="first" data-type="video">video</option>');
      resolve();
    }, 1000);
  });
};

谢谢!

1 个答案:

答案 0 :(得分:0)

你可以这样做:

$('#one').change(function() {
  $('#two').val('change_by_one').change();
});

$('#two').change(function() {
  $('#three').val('change_by_two').change();
});

$('#three').change(function() {
  $('#four').val('change_by_three');
});

您可以在此处进行测试:https://jsfiddle.net/m2gb3yj1/9/