Question

I’m looking to convert inputs to selects using Jquery, while taking the value form the input and using it as the selected option. But I’ve only got half way there so far in the below code. Can anyone see where its going wrong? Or maybe suggest an alternative method.

HTML

<div class="inputDiv"><input type="text" id="input01" value="1" name="input01"/></div>
<div class="inputDiv"><input type="text" id="input02" value="4" name="input02"/></div>
<div class="inputDiv"><input type="text" id="input03" value="2" name="input03"/></div>
<div class="inputDiv"><input type="text" id="input04" value="1" name="input04"/></div>
<div class="inputDiv"><input type="text" id="input05" value="4" name="input05"/></div>

JS

$(".inputDiv input[type=text]").each(function() {
    var qty = $(this).val();
    var currentId = $(this).attr('id');
    alert(qty + " is a Number");
    alert(currentId + " is a ID");
    $(this).replaceWith('<select id="' + currentId + '" name="" class="NewSelect">' +
          '<option value="1">1</option>' +
          '<option value="2">2</option>' +
          '<option value="3">3</option>' +
          '<option value="4">4</option>' +
          '<option value="5">5</option>' +
        '</select>');

        $("option[value=" +this.qty+ "]").attr('selected', 'selected');
});

Answer 1

    $(".inputDiv input[type=text]").each(function() {
        var qty = this.value;
        var currentId = this.id;
        var selectbox = $('<select id="'+currentId+'><option value="-1"></select>');
        $(this).replaceWith(selectbox);
        for(var i = 1; i < 6; i++) {
            var option = document.createElement('option');
            option.value = i;
            $(option).text(i);
            if(i==qty) option.setAttribute('selected','selected');
            selectbox.append($(option));

        }

    });

JSFIDDLE