在选择下拉菜单中隐藏文件扩展名 (html/css)答案

【问题标题】：Hide file extension on select dropdown (html/css)在选择下拉菜单中隐藏文件扩展名 (html/css)
【发布时间】：2017-07-29 01:40:34
【问题描述】：

我有一个用 ovpn 文件动态填充的选择下拉菜单，因此它显示，例如 United Kingdom.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>

【问题讨论】：

jQuery 不可用？
您是否使用 ajax 调用来获取下拉值？如果是，您可以在 php 代码中使用 rtrim() 删除“.ovpn”
看这里：stackoverflow.com/questions/1144783/…
如果您已经尝试过，您的问题是什么，您是完全失败还是部分失败？

标签： javascript php jquery html css

【解决方案1】：

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

结果是“测试” 删除最后 5 个字符试试这个概念……像你一样改变……

【讨论】：

【解决方案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

【讨论】：

【解决方案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>

【讨论】：

谢谢，我喜欢这种方法，但我很难让它发挥作用。我已经使用填充下拉选项的脚本修改了我的问题，因为我认为使用您在此处使用的方法对其进行修改将提供解决方案，但我不确定我到底做错了什么。
将此代码添加到您的按钮单击功能中，首先测试它是否简单，无需单击按钮