如何链接jQuery onchange事件


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

谢谢!

你可以

这样做:

$('#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/

最新更新