javascript - 菜单打开时更改所选选项的文本

Question

我有一个可在移动设备中使用的选择选项菜单。

我有第一个选项，带有文本“- Menu - ”，用于打开我的菜单。

<option value="menu" selected="selected" name="menu">- Menu -</option>

但是当我在手机上打开这个菜单时，我想将“-菜单-”的文本更改为“关闭菜单”。

我正在尝试这样:

$( "#select_menu" ).click(function() {
    $('#select_menu option[value="menu"]').text("Close Menu");
});

但它工作不正常，因为当我关闭选择选项菜单时，文本“-菜单-”只会更改为“关闭菜单”。

当我打开选择选项菜单时，我希望始终显示“关闭菜单”文本。

当我关闭选择选项菜单时，我希望再次将文本设置为“-菜单-”。

你知道我该怎么做吗？

<select id="select_menu"> 
    <option value="menu" selected="selected">- Menu -</option>
    <option value="/team"> Team </option> 
    <option value="/contacts"> Contacts</option>  
</select>

Answer 1

菜单的元素值为“”试试这个...

 $( "#select_menu" ).click(function() {
        $('#select_menu option[value=""]').text("Close Menu");
    });

我也会转向这种语法

 $( "#select_menu" ).on( "click", function( e ) {
        $(e.target).find( 'option[value=""]').text("Close Menu");
    });