替换选择框选项中的某些文本

Question

我有一个“显示/隐藏”选择框（ JS Fiddle ） ，它从选定的选项中获取类名，并隐藏相应的无序列表项。 当单击一个选项时，我不知所措要使用replace()将文本Hide替换为Show ，反之亦然（例如，单击时Show Month应该变成Hide Month。）

当我单击全部显示选项时，我还想将所有选项都更改回Hide 。

当我使用findoption.replace('Hide','Show'); 我收到了这个Uncaught TypeError: undefined is not a function错误。 谁能告诉我该怎么做？ 任何帮助，将不胜感激。

JS代码：

$(document).ready(function(){
    $(".showhidelist").change(function() {
        $this = $(this);
        var findoption = $this.find('option:selected');
        var selected = findoption.data('hide');
        var show_hide_li = $("."+selected);
        if (show_hide_li.css("display") == "none") {
            show_hide_li.show(); 
           /* Want to Replace the text Hide with Show */
        }
        else if (show_hide_li.is(':visible')){
            show_hide_li.hide();
          /* Want to Replace the text Show with Hide */
        }
        else if (selected == "Reset") {
            $('li').show();
         /* Want to Replace the text Show with Hide if it's true */
        }
    });

});

HTML

<select class="showhidelist">
    <option data-hide="Reset">Show All</option>
    <option data-hide="year">Hide Year</option>
    <option data-hide="month">Hide Month</option>
    <option data-hide="day">Hide Day</option>
</select>

<ul id="list">
    <li class="year">2004</li>
    <li class="month">Feb</li>
    <li class="day">17</li>

<ul>

Answer 1

您没有将text()替换，而是可以使用.text（）必须替换的函数。

findoption.text(function(_,text){ return text.replace('Hide', 'Show')});

根据您的需要更改单词“隐藏”或“显示”。

更新：

我在里海评论中读到，您现在遇到的问题是您无法重新单击所单击的选项，请尝试重新启动“选择第一个选项”，例如：

$(".showhidelist").prop('selectedIndex',0);

Answer 2

findoption返回一个jquery数组，因此您需要访问那里的第一个元素。 我认为以下内容将满足您的需求（就所选元素而言）。

findoption[0].innerHTML = findoption[0].innerHTML.replace('Show','Hide');

我不确定您实际上在做什么-这有点古怪，因为您拥有全部的显示/隐藏功能，因此您必须浏览整个列表才能更新它们。 另外-重新选择已选择的事件时，不会得到选定的事件。

UPDATE：这包括如何使用each()更新列表中的所有项目

jsfiddle： http : //jsfiddle.net/hk4wg/15/