在选择下拉菜单中隐藏文件扩展名（html / css）

Question

我有一个选择下拉列表，其中动态填充了ovpn文件，因此它显示了例如UK.ovpn

我想隐藏.ovpn文件扩展名，但我无法使用下面的脚本，该脚本似乎可以在常规html上运行。

表单元素：

<select class="selectpicker1" name="ovpn-filename" id="ovpn-filename"></select>

我曾经尝试隐藏文件扩展名（.ovpn）的脚本，该脚本当前已附加到按钮上：

<button onclick="myFunction()">Hide Extension</button>

<script>
function myFunction()
{
var str=document.getElementById("ovpn-filename").innerHTML; 
var n=str.replace(".ovpn"," ");
document.getElementById("ovpn-filename").innerHTML=n;
}
</script>

Answer 1

var str = 'test.ovpn'; alert(str.slice(0, -5));

结果是“测试”，删除最后5个字符尝试此概念。

Answer 2

尝试这个

<button onclick="myFunction()">Hide Extension</button>

<script>
function myFunction()
{
var str=document.getElementById("ovpn-filename").innerHTML; 
var n=str.replace(/.ovpn/g," ");
document.getElementById("ovpn-filename").innerHTML=n;
}
</script>

问题是当您使用

var n=str.replace(".ovpn"," ");

它只会替换您第一次出现的.ovpn

Answer 3

您可以使用jquery实现它：

 <script>
    var optionString = '';  // declare a string to hold all options
    $("#ovpn-filename option").each(function()
    {
        var str=$(this).val(); 
        var n=str.replace(".ovpn"," ");      //remove .ovpn string        
        optionString +=  '<option>'+n+'</option>';  //add back to that option 
    });
    $('#ovpn-filename').html(optionString );  //assign all option html back to select
    </script>