如何忽略上一个选择，只写上一个选择

Question

The html code is;

                        <div>
                            <label>Categories
                                <select id="projectSelect" class="list_who_to_mail" name="projectSelect"></select>
                            </label>
                            </div>
                        </div>
                    </div>
                        <input name="projectID" id="projectID" type="hidden"></input>

                      <div>

                        <div>
                            <label >Discipline
                                <select name="disciplineSelect" id="disciplineSelect" class="list_who_to_mail"> </select>
                            </label>
                            </div>
                        </div>
                      </div>        
                            <input name="categoryID" id="categoryID" type="hidden"></input>  

                     <div>

                        <div>
                            <label >Main Group
                                <select name="main" id="main" class="list_who_to_mail">
                                <option></option>
                                <option>Technical</option>
                                <option>Contracts</option>
                                <option>Procurement / Logistics</option>
                                <option>Administrative</option>
                                <option>Financial</option>
                                <option>Legal</option>
                            </select>
                            </label>
                            </div>
                        </div>
                      </div>

                      <div >

                        <div >
                            <label>Effect on (Part 1)
                            <select name="observedPhase[]" id="observedPhase" multiple="multiple" class="list_who_to_mail" size="13">

                                <option>Warranty</option>
                                <option>Operability</option>
                                <option>Reliability</option>
                                <option>Reputation</option>
                            </select>
                            </h5></label>
                            </div>
                        </div>
                      </div>

the function is;

$(function () {
        $('.list_who_to_mail').on('change', function() {
            var id = $(this).attr("id");


            var value = $("#"+id).val();

            $("#list_mail").append(value);
        });
    });

The concept is when user clicks on the select fields function will collect ids of fields and with these ids it will list emails in "#list_mail".

The question is; when I click any option values all ids are writing side by side in the div. How can I ignore previous selection and write only last selected id of every option on the div? Considering "disciplineSelect", name="main", categoryID" and "observedPhase[]".

Thanks in advance

Edit: language

Answer 1

To overwrite any previous value you should set the html() of the element, not append() a new string value. Try this:

$('.list_who_to_mail').on('change', function() {
    $("#list_mail").html($(this).val());
});

Example fiddle

Note that you can also shorten your code as this is a reference to the select that changed. You don't need to select it again by its id .

---

Update

If you want to get the selected value from each option, you can use map() :

$('.list_who_to_mail').on('change', function() {
    var values = $('.list_who_to_mail').map(function() {
        return $(this).val();
    }).get();
    $("#list_mail").html(values.join(','));
});

Example fiddle

Answer 2

Don't use .append() , use .html() or .text()

$(function () {
    $('.list_who_to_mail').on('change', function () {
        var value = $(this).val();

        $("#list_mail").html(value);
    });
});

Also in your change handler, this refers to the currently changed element so this can be used to get the jQuery wrapper for the changed element, no need to use the id-selector