External system generates translations and replace literals with span text on the page. It works perfectly fine for the most of places but it doesn't work with options in select. They support only text. As the result my page has the issue like here SQL Fiddle sample.
<select class="ProductInfo" >
<option value=""></option>
<option value="0"><span class='translation'>Opt1</span></option>
<option value="1"><span class='translation'>Opt2</span></option>
</select>
I want some jquery/javascript function that would replace option content with just text and remove wrapper in above.
Expected result:
<select class="ProductInfo" >
<option value=""></option>
<option value="0">Opt1</option>
<option value="1">Opt2</option>
</select>
External system generates translations and replace literals with span text on the page. It works perfectly fine for the most of places but it doesn't work with options in select. They support only text. As the result my page has the issue like here SQL Fiddle sample.
<select class="ProductInfo" >
<option value=""></option>
<option value="0"><span class='translation'>Opt1</span></option>
<option value="1"><span class='translation'>Opt2</span></option>
</select>
I want some jquery/javascript function that would replace option content with just text and remove wrapper in above.
Expected result:
<select class="ProductInfo" >
<option value=""></option>
<option value="0">Opt1</option>
<option value="1">Opt2</option>
</select>
4 Answers
Reset to default 3It is best to fix in the template itself, if that is not possible you can try something like
$('.ProductNoInfo option').text(function(i, t) {
return $(t).text()
});<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="ProductNoInfo">
<option value=""></option>
<option value="0"><span class='translation'>Opt1</span></option>
<option value="1"><span class='translation'>Opt2</span></option>
</select>Try using decodeURICompoenent
$("select option").each(function() {
this.textContent = $(decodeURIComponent(this.textContent)).text()
})<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="ProductInfo" >
<option value=""></option>
<option value="0"><span class='translation'>Opt1</span></option>
<option value="1"><span class='translation'>Opt2</span></option>
</select>Try this,
$('.ProductNoInfo option').each(function(){
$(this).text($(this).find('span').text());
});
<html>
<head>
<script src="http://code.jquery./jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
$('.ProductInfo option').each(function () {
this.textContent = $(decodeURIComponent(this.textContent)).text()
});
});
</script>
</head>
<body>
<select class="ProductInfo" >
<option value=""></option>
<option value="0"><span class='translation'>Opt1</span></option>
<option value="1"><span class='translation'>Opt2</span></option>
</select>
</body>
</html>