javascript - 如何定位已替换的元素

Question

我有一个下拉列表。当值更改时，我想要一条确认消息，要求确认所选值。a) 如果不是，我希望重置该值。b) 如果是，我想用带有所选值的 span 标签替换下拉列表。

如何实现 b) 部分。这是我编写的代码，但这会更改所有 span 元素的值。即使是之前已经设置过的。

这是在 php 中。所以请忽略html中的“”和“.”

"<td>".
                    "<select name = 'current' id = 'test'>".
                        "<option value='None' selected>Choose a Sales Rep</option>".
                        "<option value='sales1'>Sale Rep1</option>".
                        "<option value='sales2'>Sale Rep2</option>".
                        "<option value='sales3'>Sale Rep3</option>".
                        "<option value='sales4'>Sale Rep4</option>".
                    "</select>".
                 "</td>";

<script>
        // var current = $('input[name=current]').val();    
        $("select").change(function(){
            if(confirm("Have you chosen your sales rep?")){
                var $set_value = $(this).val();
                console.log($set_value);
                $(this).replaceWith("<span></span>");
                $("span").html($set_value);

                return false;
            }else{
                $(this).val('None');
                //$.data(this, 'current',$(this).val());
            }

        })
    </script>

如何定位刚刚替换我单击的下拉列表的 span 标记？请指教。

TIA

Answer 1

您只需在插入之前创建它即可

var span = $('<span />', { html : $set_value });

$(this).replaceWith(span);

// if you wanted to do something to it later

span.on('click', function() { alert("wohoo") });