Turning INPUT into Dropdown Items?

Asked

Viewed 401 times

0

How can I turn inputs into a droplist menu, via jQuery?

My code:

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

Follow an image of the effect I need:

inserir a descrição da imagem aqui

Remembering that I have no control of the HTML it generates.

javascript jquery vtex

  • What do you want to do when you say "I could transform "? Can you explain what you want to change? $.item-Dimension-Size input')` selects all inputs in this code that you have placed

  • Transform the elements radio in option of a select ? In fact the elements have enough attributes, I would like to keep them ?

  • I need Inputs to be in dropdown form, and not displayed by default! I will post an image to illustrate better!

  • Yes I would like to keep the attributes, just turn them into droplist

1 answer

1

I made the code below to make 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);
});
<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>

With this, it erases the "radio" and mounts the combobox (select)

  • Hello the code is perfect! But in each "radio" there was a link that would exchange the product, in the case when the "Radio" is transformed this action does not happen anymore, what could be ?

  • I don’t know VTEX, but I believe it should have a "bindada" javascript function for radio.. As we replaced the input contents for the combobox, you would have to run this "bind" again (to work in select).. It is likely that you will have to add the attributes that were in the input to "<options>"..

  • I gotta see how to do this :(

Browser other questions tagged javascript jquery vtex

You are not signed in. Login or sign up in order to post.