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>
Share
Improve this question
asked Jan 25, 2016 at 4:09
dcieslakdcieslak
2,7151 gold badge14 silver badges20 bronze badges
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>
发布者:admin,转转请注明出处:http://www.yc00.com/questions/1745249943a4618617.html
评论列表(0条)