Turning INPUT into DropDown Items?

Navigation
0

Good afternoon guys, I have a question, how would I use jquery to transform inputs into a droplist menu?

Html is as follows: 

<li class="select skuList item-dimension-Tamanho">
    <span class="group_0">
        <input name="293_Tamanho" dimension="Tamanho" data-value="P(S)" data-dimension="Tamanho"
        class="skuselector-specification-label input-dimension-Tamanho sku-selector skuespec_Ps change-image"
        id="293_Tamanho_0" value="P(S)" specification="Ps" type="radio">
        <label for="293_Tamanho_0" class="dimension-Tamanho espec_0 skuespec_Ps skuespec_Tamanho_opcao_P(S) skuespec_Tamanho_opcao_Ps">
            P(S)
        </label>
        <input checked="checked" name="293_Tamanho" dimension="Tamanho" data-value="M(M)"
        data-dimension="Tamanho" class="skuselector-specification-label input-dimension-Tamanho sku-selector skuespec_Mm change-image checked sku-picked"
        id="293_Tamanho_1" value="M(M)" specification="Mm" type="radio">
        <label for="293_Tamanho_1" class="dimension-Tamanho espec_0 skuespec_Mm skuespec_Tamanho_opcao_M(M) skuespec_Tamanho_opcao_Mm checked sku-picked">
            M(M)
        </label>
        <input name="293_Tamanho" dimension="Tamanho" data-value="G(L)" data-dimension="Tamanho"
        class="skuselector-specification-label input-dimension-Tamanho sku-selector skuespec_Gl change-image"
        id="293_Tamanho_2" value="G(L)" specification="Gl" type="radio">
        <label for="293_Tamanho_2" class="dimension-Tamanho espec_0 skuespec_Gl skuespec_Tamanho_opcao_G(L) skuespec_Tamanho_opcao_Gl">
            G(L)
        </label>
        <input name="293_Tamanho" dimension="Tamanho" data-value="GG(XL)" data-dimension="Tamanho"
        class="skuselector-specification-label input-dimension-Tamanho sku-selector skuespec_Ggxl change-image"
        id="293_Tamanho_3" value="GG(XL)" specification="Ggxl" type="radio">
        <label for="293_Tamanho_3" class="dimension-Tamanho espec_0 skuespec_Ggxl skuespec_Tamanho_opcao_GG(XL) skuespec_Tamanho_opcao_Ggxl">
            GG(XL)
        </label>
    </span>
</li>

Here's an image of the effect I need:

link

Remembering that I do not have control of the html it generates! Thanks in advance for your help!

    
asked by anonymous 16.09.2015 / 19:12

1 answer

1

I made the following code to do this "transformation": 

$(document).ready(function(){
    var combo = "<select>";
    $(".item-dimension-Tamanho label").each(function(i,valor){
       var texto = $(valor).text();
       combo += "<option value='" + texto + "'>" + texto +"</option>";
    });
    combo += "</select>";
    $(".item-dimension-Tamanho").replaceWith(combo);
});
  

Follow the JSFIDDLE link!

With this, it erases the "radios" and assembles the combobox (select)

    
16.09.2015 / 22:45
How to understand the WildFly8x server error message? Filter a query using an attribute in Laravel