CODEWITHSUNDEEP
javascriptjqueryhtmllistbox
Santosh Khatri
Santosh Khatri

Reputation: 487

How to create element number of value of select using jQuery?

I have following two select tags and I want to show input tag according to their values.

<select name="ticketId" id="myQty1">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>
<select name="ticketId" id="myQty2">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

So, I want three input tags if someone select one value from #myQty1 and two values from #myQty2. my out put would be like below:

<!-- participate #1 -->
<input type="text" name="myQty1_parti1"/>

<!-- Participate #2 -->
<input type="text" name="myQty2_parti1"/>
<input type="text" name="myQty2_parti2"/>

So how can I show this?

Upvotes: 3

Views: 50

Answers (1)

Mohammad
Mohammad

Reputation: 21489

You need to create target input when change event of select. In select onchange, iterate create of input equal to value of select.

$("#myQty1").change(function(){
     $("#myQty1_result").empty();
     for (var i = 1; i <= $(this).val(); i++){
         $("#myQty1_result").append('<input type="text" name="myQty1_parti'+i+'"/>');
     }
});
$("#myQty2").change(function(){
    $("#myQty2_result").empty();
    for (var i = 1; i <= $(this).val(); i++){
         $("#myQty2_result").append('<input type="text" name="myQty2_parti'+i+'"/>');
     }
});
#myQty1_result > input {
    border: 1px solid blue;
}

#myQty2_result > input {
    border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="ticketId" id="myQty1">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>
<select name="ticketId" id="myQty2">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<div id="myQty1_result"></div>
<div id="myQty2_result"></div>

You can make the code simple like bottom code:

$("select").change(function(){
    $("#"+this.id+"_result").empty();
    for (var i = 1; i <= $(this).val(); i++){
        $("#"+this.id+"_result").append('<input type="text" name="'+this.id+'_parti'+i+'"/>');
    }
});

Upvotes: 1

Related Questions