javascript - 使用/Jquery 从下拉列表中删除/添加基于用户选择的文本

Question

我只需要根据用户从下拉字段中的选择在某些文本的末尾添加一个星号。如果用户从下拉列表中选择第一个选项，则会附加星号，如果用户选择第二个选项，则会删除星号。我想我需要用 jquery 来做到这一点，但我无法弄清楚我应该使用哪个函数。我试图将星号包装在一个 div 中，并使用 Jquery 切换 div 的 css 显示属性，但这看起来真的很笨拙。有没有更好的方法来动态添加/删除文本？

Answer 1

<select>
    <option value="1">First option</option>
    <option value="2">Second option</option>
</select>
Some text <span id="asterisk" style="display:none">*</span>

$(document).ready(function() {

    // bind to the select's change event
    $("select").change(function() {
        if($(this).val() == "2") {
            $("#asterisk").hide();
        } else {
            $("#asterisk").show();
        }

    // fire the event once when the page loads
    // so the visible state of the asterisk is based on the selected option
    }).change(); 
});