Question

我最近问了一个question关于用jQuery操纵html选择框的问题，并得到了这个非常简短的代码作为答案。

$("#myselect").change(function (event) {
    var o = $("#myselect option:selected"),
    v=o.text(),
    old = $("#myselect option:contains('name')"),
    oldv = old.html();

    oldv && old.html( oldv.replace('name: ', '') );
    o.text('name: ' + v);
});

我有一个问题。这段代码不适用于多个类别，我似乎无法理解它是如何完成的。所以，我对它做了明显的改变：

$("select").change(function (event) {
    var foo = $("select option:selected"),
        bar = foo.text(),
        cat = foo.parent().attr("label"),
        old = $("select option:contains('" + cat + "')"),
        oldbar = old.html();

    oldbar && old.html( oldbar.replace(cat + ': ', '') );
    foo.text(cat + ': ' + bar);
});

这现在适用于多个optgroups /类别但导致了另一个错误。那是一个更有问题的问题。

当您从一个类别点击到另一个类别时会发生这种情况。请查看jsFiddle。

Answer 1

最后一个片段的问题是它使用当前类别的名称来定位要翻转的最后一个选定标签。相反，如何搜索“：”，（如果你在其中一个选项中有“：”，这将不起作用），然后替换字符串的那一部分。

将第5行更改为：

, old = $("select option:contains(':')")

和第8行：

oldbar && old.html(oldbar.replace(oldbar.substr(0, oldbar.indexOf(':') + 2),''));

如果那不适合你，请告诉我！

编辑：作为事后的想法，您可以考虑添加此行

$('select').change();

同样，在$（document）.ready（）事件的某个地方，这样当页面首次呈现默认值时，会获得你想要的前缀（我认为）。

Answer 2

我已经重命名了这些变量，因为用一个有意义的名字来命名你的变量和函数是一个很好的习惯，所以你可以在你的记忆中玩弄正在发生的事情。

$("select").change(function () {
    // We immediately invoke this function we are in which itself returns a function;
    // This lets us keep lastCat private (hidden) from the rest of our script,
    // while still giving us access to it below (where we need it to remember the
    // last category).
    var lastCat;
    return function (event) {
        var selected = $("select option:selected"), 
            selectedText = selected.text(),
            cat = selected.parent().attr("label");
        if (lastCat) { // This won't exist the first time we run this
            oldSelection = $("select option:contains('" + lastCat + ":')");
            oldHTML = oldSelection.html();
            oldHTML && oldSelection.html(oldHTML.replace(lastCat + ': ', ''));
        }
        selected.text(cat + ': ' + selectedText);
        lastCat = cat; // Remember it for next time
    };
}()); // Be sure to invoke our outer function (the "closure") immediately, 
// so it will produce an event function to give to the change handler, 
// which still has access to the variable lastCat inside

Answer 3

这是一个黑暗中的镜头。乍一看，您似乎没有保存以前的选择，并且您正在使用在 oldbar＆amp;＆amp ;;中触发事件的选择。 old.html（oldbar.replace（cat +'：'，''））; 行。您需要将先前选择的类别保存在单独的var。

中

如何让这段代码更好？

3 个答案: