jQuery - auto filled value by Norlihazmey Ghazali

http://stackoverflow.com/questions/32325097/select-radiobutton-when-text-equals-value-of-radiobutton/32325187?noredirect=1#comment52528637_32325187

by Norlihazmey Ghazali

HTML

<form>
    <!--Keine Label!-->
    <!--Keine Pixelangebane -> Punkt!-->
    <label>Salutation
        <input type="radio" id="Herr" name="anrede" value="Mr.">Mr.
        <input type="radio" id="Frau" name="anrede" value="Mrs.">Mrs.</label>
    <label>First Name
        <input type="Text" name="vorname" autocomplete="off">
    </label>
    <label>Surname
        <input type="Text" name="nachname" autocomplete="off">
    </label>
    <button data-action='add' id="add">Add</button>
    <button data-action='edit'>Overwrite</button>
    <button data-action='remove'>Delete</button>
    <br>
    <br>
    <table>
        <colgroup>
            <col width="200">
                <col width="650">
        </colgroup>
        <tr>
            <td>List</td>
            <td>Preview</td>
        </tr>
    </table>
    <table>
        <colgroup>
            <col width="200 ">
                <col width="650 ">
        </colgroup>
        <tr>
            <td>
                <select name="docsApp.options" size="10 " multiple="multiple ">
                    <option id='Herr' value='Mr.'>Johny Coulson</option>
                    <option id='Frau' value='Mrs.'>Johny1 Coulson1</option>
                </select>
            </td>
            <td>
                <br>
                <center>Welcome!</center>
                <!--Text-align anstatt Center! -->
                <br>
                <marquee width="650 " direction="left " scrollamount="5 " scrolldelay="1 ">
                    <!-- HTML5 / CSS gefrikel-->
                    <?php foreach ($names as $name) { echo $name; echo ' +++ '; } ?>
                </marquee>
            </td>
    </table>
    <input type="Submit " name=" " value="Save list ">
    <br>
    <input type="button " onClick="history.go(0) " VALUE="Update preview ">
</form> <span class="result "></span>

CSS

html {
    font-family:"Arial", sans-serif;
    font-size: 14pt;
    width: 1100px;
    min-height: 400px;
    /* background-image: linear-gradient(-30deg, #92B2C3 0%, #FFF 40%);
		background-repeat: no-repeat; */
    background-color: #fff;
}
@media (min-width: 567px) {
    html {
        border: 1px solid;
    }
}
body {
    margin: 12px;
}
table td {
    vertical-align: top;
    text-align: left;
    font-size:24px;
    <!--border: 1px solid black;
    -->
}
.radio {
    font-size:16px;
}
h1 {
    position: relative;
    left: -12px;
    top: -12px;
    width: calc(100% + 16px);
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 6px;
    font-size: 20pt;
    border-top: 1px solid #99AC00;
    border-bottom: 1px solid #99AC00;
    border-left: 0;
    border-right: 0;
    padding: 4px;
    color: #000;
    background-color: #eee;
    background: linear-gradient(-30deg, #B9CC00, #EEE 50%);
}

JavaScript

$('button').click(function (e) {
            var action = $(this).attr('data-action'),
                optionVal = $("input[type='radio'][name='anrede']:checked").val() + ' ' + $('input[name="vorname"]').val() + ' ' + $('input[name="nachname"]').val(),
                $selectedOption = $('select[name="docsApp.options"] option:selected'),
                $nameList = $('select[name="docsApp.options"]');
            if (action === 'add') {
                $nameList.append($('<option>', {
                    value : $("input[type='radio'][name='anrede']:checked").val(),
                    text : $('input[name="vorname"]').val() + ' ' + $('input[name="nachname"]').val()
                }));
            }
            if (action === 'edit') {
                $selectedOption.text(optionVal);
            }
            if (action === 'remove') {
                $selectedOption.remove();
            }
            e.preventDefault();
        });

        $(document).on('click', 'select[name="docsApp.options"]', function () {
           // alert('ad');
            var selectedName = $('select[name="docsApp.options"] option:selected').text();

            console.log(selectedName);

            // unchecked all the radio button first
            $('input[name="anrede"]').prop('checked', false);
            // checked only radio with matched value
            $('input[name="anrede"][value="' + $(this).val() + '"]').prop('checked', true);


            // andere Trennzeichen mit # vielleicht?
            $('input[name="vorname"]').val(selectedName.split(' ')[0]);
            $('input[name="nachname"]').val(selectedName.split(' ')[1]);
        });

        $('form').submit(function (e) {
            var nameList = {},
            names,
            i = 0;

            $('select option').each(function () {
                nameList[i] = $(this).text();
                i++;
            });
            names = JSON.stringify(nameList);
            $.ajax({
                type:...