Simple : 5 selected to <" select "> , open 5 textbox , my textbox style=display:none if 5 selected open(show) 5 textbox . Thank you.

My english is not very good, sorry.

Örnek olarak : Yapmış olduğum websitesinde select ile seçilen değere göre textlerimin açılmasını istiyorum. Başta görünmez durumdalar ve 100 tane text gizli. Select ile seçildikten sonra seçilen değer kadar gösterilmesini istiyorum. Şimdiden teşekkürler.

<td><select  id="addusers">                                           
<option value="0">Please add users</option>                                                                              <option value="1">Add 1 users</option>
<option value="2">Add 2 users</option>
<option value="3">Add 3 users</option>
<option value="4`enter code here`">Add 4 users</option>
</select></td>
<td>
<input type="text" name="users1" id="users1"style="display:none;">
<input type="text" name="users2" id="users2"style="display:none;">
<input type="text" name="users3" id="users3"style="display:none;">
<input type="text" name="users4" id="users4"style="display:none;">
</td>

CodePudding user response：

Are you looking for something like this, where you make the selection in your dropdown & it displays that amount of inputs?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div style="position:absolute;left:50%;top:25%;">
    <select id="addusers" style="height:35px;width:100%;">
        <option selected disabled>Make a Selection</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
    <br/>
    <input type="text" id="users1" style="display:none;height:35px;" placeholder="Input 1"><br/>
    <input type="text" id="users2" style="display:none;height:35px;" placeholder="Input 2"><br/>
    <input type="text" id="users3" style="display:none;height:35px;" placeholder="Input 3"><br/>
    <input type="text" id="users4" style="display:none;height:35px;" placeholder="Input 4"><br/>
</div> 

<script>
$(document).ready(function(){

    $("#addusers").on("change", function(){
        var option = $(this).val();
        if(option == '1'){
            $("#users1").show();
            $("#users2").hide();
            $("#users3").hide();
            $("#users4").hide();
            $("#users5").hide();
        }
        if(option == '2'){
            $("#users1").show();
            $("#users2").show();
            $("#users3").hide();
            $("#users4").hide();
            $("#users5").hide();
        }
        if(option == '3'){
            $("#users1").show();
            $("#users2").show();
            $("#users3").show();
            $("#users4").hide();
            $("#users5").hide();
        }
        if(option == '4'){
            $("#users1").show();
            $("#users2").show();
            $("#users3").show();
            $("#users4").show();
            $("#users5").hide();
        }               
    });

});
</script>