Question

html代码是;

                        <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>

功能是;

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


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

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

概念是当用户点击选择字段时，功能将收集字段的ID，并且使用这些ID，它将列出＆＃34; #list_mail＆＃34;中的电子邮件。

问题是;当我点击任何选项值时，所有ID都在div中并排写入。如何忽略先前的选择并只写入div上每个选项的最后选择的id？考虑＆＃34; disciplineSelect＆＃34;，name =＆＃34; main＆＃34;，categoryID＆＃34;和＃34; observePhase []＆＃34;。

提前致谢

编辑：语言

Answer 1

要覆盖任何先前的值，您应该设置元素的html()，而不是append()新的字符串值。试试这个：

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

Example fiddle

请注意，您还可以缩短代码，因为this是对已更改的select的引用。您无需再按id选择它。

更新

如果您想从每个选项中获取所选值，可以使用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

请勿使用.append()，使用.html()或.text()

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

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

同样在您的更改处理程序中，this引用当前更改的元素，因此this可用于获取已更改元素的jQuery包装器，无需使用id-selector < / p>

如何忽略先前的选择并仅写入最后选择的内容

2 个答案: