0

Como posso transformar inputs em um menu droplist, via jQuery?

Meu código:

<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>

Segue uma imagem do efeito que preciso:

inserir a descrição da imagem aqui

Lembrando que não tenho controle do HTML que ele gera.

4
  • O que queres fazer quando dizes "conseguiria transformar "? podes explicar o que queres mudar? $.item-dimension-Tamanho input')` seleciona todos os inputs nesse código que colocaste
    – Sergio
    Commented 16/09/2015 às 17:14
  • Transformar os elementos radio em option de um select ? Aliás os elementos tem bastante atributos, gostaria de mantê-los ? Commented 16/09/2015 às 17:15
  • Preciso que os Inputs fiquem em forma de dropdown, e nao exibidos como é por padrão! Irei postar uma imagem para ilustrar melhor! Commented 16/09/2015 às 17:15
  • Sim gostaria de manter os atributos, somente transforma-los em droplist Commented 16/09/2015 às 17:16

1 Resposta 1

1

Fiz o código abaixo para fazer esta "transformação":

$(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);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<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>

Com isto, ele apaga os "radio" e monta o combobox (select)

3
  • Olá o código está perfeito! Mas em cada "radio" existia um link que trocaria o produto, no caso quando o "Radio" é transformado essa ação não acontece mais, o que poderia ser ? Commented 16/09/2015 às 21:16
  • Não conheço VTEX, mas acredito que deva ter uma função javascript "bindada" para o radio.. como fizemos o replace do conteúdo dos input para o combobox, vc teria que rodar esta "bind" novamente (para funcionar no select).. E provável que tenha que adicionar os atributos que estavam no input para "<options>"..
    – Diullian
    Commented 17/09/2015 às 12:31
  • Tenho que ver como fazer isso :( Commented 17/09/2015 às 16:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .