JSFiddle - React, Tailwind, and code Playground

by meridius

HTML

<table>
    <tr>
        <td>one</td>
        <td>
            <select name="zadavatel">
                <option value="0">-- vyberte --</option>
                <option value="new">-- nový zadavatel --</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>two</td>
        <td>
            <select name="zadavatel1">
                <option value="0">-- vyberte --</option>
                <option value="new">-- nový zadavatel --</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>three</td>
        <td>
            <select name="zadavatel2">
                <option value="0">-- vyberte --</option>
                <option value="new">-- nový zadavatel --</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>four</td>
        <td>
            <select name="zadavatel3">
                <option value="0">-- vyberte --</option>
                <option value="new">-- nový zadavatel --</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>five</td>
        <td>
            <select name="zadavatel4">
                <option value="0">-- vyberte --</option>
                <option value="new">-- nový zadavatel --</option>
            </select>
        </td>
    </tr>
</table>

JavaScript

var out = {};
$('select').bind("change", function() {
    if ($(this).val() == "new") {
        var nazev = prompt('Zadejte název zadavatele', 
                           $(this).parent().siblings(':first-child').text());
        if (nazev == null) {
            $(this).val($.data(this, 'current'));
            return false;
        } else {
            var pole2 = {};
            pole2["nazev"] = nazev;
            /*
            $.ajax({
                type       : "POST",
                cache      : false,
                url        : "./pokus_zad.php",
                data       : JSON.stringify(pole2),
                success    : function(data) {
                    out = JSON.parse(data);    //data.id contains number
                }
            });
            */
            out.id = 15;  // this work, but it SHOULD work without it (with AJAX)
            $(this).closest('table').find('select').each(
                function() {
                    $(this).append($('<option>', { "value" : out.id }).text(nazev));
                }
            );
            $(this).closest('select').val(out.id).attr('selected', 'selected');
        }
    }
    $.data(this, 'current', $(this).val());
});