JSFiddle - React, Tailwind, and code Playground
by Maksim Kalenich
HTML
<select name="source">
<option value="USD">USD</option>
<option value="EUR">EUR</option>
<option value="RUB">RUB</option>
</select>
<select name="deposit">
<option value="AUD">Account 1 AUD</option>
<option value="CHF">Account 2 CHF</option>
<option value="CAD">Account 3 CAD</option>
</select>
<br />
<label><input name="choose" type="radio" value="1" data-target="select[name=deposit]" checked />В валюте счёта</label>
<label><input name="choose" type="radio" value="2" data-target="select[name=source]" />В валюте кошелька</label>
<br />
<input name="currency" value="" data-destination="deposit" />
JavaScript
(function(window, $) {
"use strict";
var defaults = {
'destination': '',
};
function watcher(options) {
options = $.extend(defaults, options);
var $control = this,
$destination = $(options.destination),
targets = {};
$control.each(function(i, c) {
var $c = $(c),
$target = $($c.data('target'));
$c.on('change', function (e) {
$destination.val($target.val());
$destination.data('destination', $target.attr('name'));
});
if (!targets.hasOwnProperty($target.attr('name'))) {
targets[$target.attr('name')] = $target;
}
});
$.each(targets, function(i, c) {
var $c = $(c);
$c.on('change', function (e) {
if ($destination.data('destination') === $c.attr('name')) {
$destination.val(this.value);
}
});
});
}
$.fn.watcher = watcher;
})(window, window.jQuery);
$('input[name=choose]').watcher({'destination': "input[name=currency]"});