Hide file extension on select dropdown (html/css)

Question

I have a select dropdown which is dynamically populated with ovpn files so it shows, for example, United Kingdom.ovpn

I would like to hide the .ovpn file extension but I haven't been able to using the script below which seems to work on regular html.

The form element:

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

The script I've used to try and hide the file extension (.ovpn), it's currently attached to a button :

<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>

are you using ajax call to get dropdown values? if yes, you can use rtrim() in your php code to remove ".ovpn" — Bhaskar Jain, Mar 08 '17 at 13:09
Take a look here: http://stackoverflow.com/questions/1144783/how-to-replace-all-occurrences-of-a-string-in-javascript — Stefano Zanini, Mar 08 '17 at 13:11
so what's your problem if you have already tried, have you failed completely or partially what ? — Abhinav, Mar 08 '17 at 13:12

score 0 · Answer 1 · answered Mar 08 '17 at 13:16

0

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

result is "test" remove last 5 charecters try this concept....change like u...

answered Mar 08 '17 at 13:16

Chandhru Sekar

308
2
9

score 0 · Answer 2 · answered Mar 08 '17 at 13:17

try this

<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>

problem is when you use

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

it will only replace your 1st occurrence of .ovpn

score 0 · Answer 3 · answered Mar 08 '17 at 13:33

0

You can achieve it with 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>

answered Mar 08 '17 at 13:33

Bhaskar Jain

1,651
1
12
20

Thanks, I'd like this approach but I'm struggling to make it work. I've amended my question with the script which populates the dropdown options as I think modifying it with the approach you have here will provide the solution but I'm not sure exactly what I'm doing wrong. – Simon Net Mar 08 '17 at 14:13
Add this code in your button click function, first test it simple without on button click – Bhaskar Jain Mar 08 '17 at 14:16

Hide file extension on select dropdown (html/css)

3 Answers3