I am generating the drop down dynamically by script (Smarty).
If the drop down has just one option value, is it possible to display it as a label.
This will display a drop down with 3 values.
<select>
<option> 1 </option>
<option> 2 </option>
<option> 3 </option>
</select>
If it shows just one value then display it as label, is it possible with pure HTML or Jquery or combination of both? I could use smarty to check for the values and throw different different html, but that would make my code long as I have many drop downs.
<select>
<option> 1 </option>
</select>
Any simple logic, which I might be missing?
UPDATE (RESOLVED)
Thank for all the stackoverflow'ers who helped. I used the code given by @ahren which worked as required.
However I have expanded the code to copy the attributes of one tag to another, in case if someone is looking for
// To replace a <select>, with <label> tag if it has just one value
$('select').each(function(){
if($(this).find('option').length === 1){
// Copy all attributes from a given tag and save it in a variable.
var attributes_from = $(this).prop("attributes");
var attributes_to = '';
$.each(attributes_from, function() {
attributes_to += ' '+this.name+'="'+this.value+'"';
});
// If select then copy its value from option.
attributes_to += ' value="'+$(this).find('option').attr('value')+'"';
// Replace the <tag>
$(this).replaceWith(function(){
return $('<label '+attributes_to+' />').html($(this).text());
});
}
});
$('select').each(function(){
if($(this).find('option').length === 1){
$(this).replaceWith(function(){
return $('<label />').html($(this).text());
});
}
});
After you've generated your dropdowns, you can just run this snippet to check each of the select
elements.