CODEWITHSUNDEEP
htmljqueryhtml-selectsmarty
Abhishek Madhani
Abhishek Madhani

Reputation: 1175

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

Upvotes: 0

Views: 1568

Answers (2)

Anthony Grist
Anthony Grist

Reputation: 38345

I'd iterate over each of the <select> elements, checking the number of options they have, and make the required DOM changes accordingly:

$('select').each(function(index, select) {
    var numOptions = $('option', this).length;
    if(numOptions === 1) {
        // replace the select element here - something like the below
        var label = $('<label>').html(this.value);
        $(this).after(label).hide();
    }
});

I opted to hide, rather than replace, the <select> element so you still get the value sent back as part of the form. If that's not required then you can remove the element entirely using .remove() in place of .hide().

Upvotes: 1

ahren
ahren

Reputation: 16961

$('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/

Upvotes: 3

Related Questions