Search code examples
htmljqueryhtml-selectsmarty

HTML, display label if drop down has just one value


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());
        });
    }
});

Solution

  • $('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.

    DEMO: http://jsfiddle.net/kqunE/