farfanoide/index.html

## index.html
<!DOCTYPE html>
    <head>
        <meta charset="UTF-8">
        <title>ale</title>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <style>
            .wrapper {
                margin: 1em;
                padding: 1em;
            }
        </style>
    </head>
    <body>

        <div class="wrapper form-inline">

            <div class="form-group">
                <label for="valeur"> Valeur vénale:</label>
                <div class="input-group">
                    <input type="number" value="80000" data-value-input class="form-control">
                    <div class="input-group-addon">
                        <i class="glyphicon glyphicon-euro"></i>
                    </div>
                </div>
            </div>
            <br>
            <div class="form-group">
                <label for="zone_select">Zones:</label>
                <select name="zone_select"
                        id="zone_select"
                        data-zone-selector
                        class="form-control">
                    <option value="RH">RH</option>
                    <option value="R2">R2</option>
                    <option value="R2a">R2a</option>
                    <option value="R1">R1</option>
                    <option value="B2">B2</option>
                    <option value="B1">B1</option>
                    <option value="ESM">ESM</option>
                </select>
            </div>

            <div>
                <strong>Prescriptions:</strong>
                <span data-prescription-target></span>
                <i class="glyphicon glyphicon-euro"></i>
            </div>
            <div>
                <strong>Préjudice:</strong>
                <span data-discount-target></span>
                <i class="glyphicon glyphicon-euro"></i>
            </div>
        </div>

        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <script>
            $(document).ready(function () {

                var ZONE_REFERENCE = {
                    'RH':  {'prescription': '.1', 'discount': '.5'},
                    'R2':  {'prescription': '.1', 'discount': '.3'},
                    'R2a': {'prescription': '.1', 'discount': '.2'},
                    'R1':  {'prescription': '.1', 'discount': '.2'},
                    'B2':  {'prescription': '.1', 'discount': '.1'},
                    'B1':  {'prescription': '.1', 'discount': '.1'},
                    'ESM': {'prescription': '.1', 'discount': '.1'},
                }

                var updatePrescriptions = function (value, zone)
                {
                    var zoneInfo            = ZONE_REFERENCE[zone],
                        $prescriptionTarget = $('[data-prescription-target]');

                    $prescriptionTarget.html(value * zoneInfo.prescription);
                };

                var updateDiscounts = function (value, zone)
                {
                    var zoneInfo        = ZONE_REFERENCE[zone],
                        $discountTarget = $('[data-discount-target]');

                    $discountTarget.html(value * zoneInfo.discount);
                };

                $('[data-value-input]').on('keyup', function (event) {
                    var value = this.value,
                        zone  = $('[data-zone-selector]').val();

                    updatePrescriptions(value, zone);
                    updateDiscounts(value, zone);
                });

                $('[data-zone-selector]').on('change', function (event) {

                    var zone  = this.value,
                        value = $('[data-value-input]').val();

                    updatePrescriptions(value, zone);
                    updateDiscounts(value, zone);

                });

                var initialZone  = $('[data-zone-selector]').val(),
                    initialValue = $('[data-value-input]').val();

                updatePrescriptions(initialValue, initialZone);
                updateDiscounts(initialValue, initialZone);
            });
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<head>
	<meta charset="UTF-8">
	<title>ale</title>
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<style>
	.wrapper {
	margin: 1em;
	padding: 1em;
	}
	</style>
	</head>
	<body>

	<div class="wrapper form-inline">

	<div class="form-group">
	<label for="valeur"> Valeur vénale:</label>
	<div class="input-group">
	<input type="number" value="80000" data-value-input class="form-control">
	<div class="input-group-addon">
	<i class="glyphicon glyphicon-euro"></i>
	</div>
	</div>
	</div>
	<br>
	<div class="form-group">
	<label for="zone_select">Zones:</label>
	<select name="zone_select"
	id="zone_select"
	data-zone-selector
	class="form-control">
	<option value="RH">RH</option>
	<option value="R2">R2</option>
	<option value="R2a">R2a</option>
	<option value="R1">R1</option>
	<option value="B2">B2</option>
	<option value="B1">B1</option>
	<option value="ESM">ESM</option>
	</select>
	</div>

	<div>
	<strong>Prescriptions:</strong>
	<span data-prescription-target></span>
	<i class="glyphicon glyphicon-euro"></i>
	</div>
	<div>
	<strong>Préjudice:</strong>
	<span data-discount-target></span>
	<i class="glyphicon glyphicon-euro"></i>
	</div>
	</div>

	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
	<!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	<script>
	$(document).ready(function () {

	var ZONE_REFERENCE = {
	'RH': {'prescription': '.1', 'discount': '.5'},
	'R2': {'prescription': '.1', 'discount': '.3'},
	'R2a': {'prescription': '.1', 'discount': '.2'},
	'R1': {'prescription': '.1', 'discount': '.2'},
	'B2': {'prescription': '.1', 'discount': '.1'},
	'B1': {'prescription': '.1', 'discount': '.1'},
	'ESM': {'prescription': '.1', 'discount': '.1'},
	}

	var updatePrescriptions = function (value, zone)
	{
	var zoneInfo = ZONE_REFERENCE[zone],
	$prescriptionTarget = $('[data-prescription-target]');

	$prescriptionTarget.html(value * zoneInfo.prescription);
	};

	var updateDiscounts = function (value, zone)
	{
	var zoneInfo = ZONE_REFERENCE[zone],
	$discountTarget = $('[data-discount-target]');

	$discountTarget.html(value * zoneInfo.discount);
	};

	$('[data-value-input]').on('keyup', function (event) {
	var value = this.value,
	zone = $('[data-zone-selector]').val();

	updatePrescriptions(value, zone);
	updateDiscounts(value, zone);
	});

	$('[data-zone-selector]').on('change', function (event) {

	var zone = this.value,
	value = $('[data-value-input]').val();

	updatePrescriptions(value, zone);
	updateDiscounts(value, zone);

	});

	var initialZone = $('[data-zone-selector]').val(),
	initialValue = $('[data-value-input]').val();

	updatePrescriptions(initialValue, initialZone);
	updateDiscounts(initialValue, initialZone);
	});
	</script>
	</body>
	</html>