'Dynamic Input fields
I want to make input fields dynamic. According to the user-selected option in one dropdown, I have to change to another select option, and also user can add more input fields and delete them. I'm able to change according to users selection but now how I add more fields and delete it dynamically. --- script ----
<script>
$(document).ready(function() {
$("#standardone").change(function() {
$(this).find("option:selected").each(function() {
var optionValue = $(this).attr("value");
if (optionValue == "ss") {
$("#select1").show();
$("#select2").hide();
$("#select3").hide();
$("#select4").hide();
$("#select5").hide();
$("#medium1").show();
$("#board1").show();
}
if (optionValue == "C_1-4" || optionValue == "C_5-8" || optionValue == "C_9" || optionValue == "C_10" || optionValue == "C_9-10" || optionValue == "11-12_C") {
$("#select1").show();
$("#select2").hide();
$("#select3").hide();
$("#select4").hide();
$("#select5").hide();
$("#medium1").show();
$("#board1").show();
}
if (optionValue == "11-12_S") {
$("#select1").hide();
$("#select2").hide();
$("#select3").hide();
$("#select4").show();
$("#select5").hide();
$("#medium1").show();
$("#board1").show();
}
if (optionValue == "IIT-JEE") {
$("#select1").hide();
$("#select2").show();
$("#select3").hide();
$("#select4").hide();
$("#select5").hide();
$("#medium1").show();
$("#board1").show();
}
if (optionValue == "NEET") {
$("#select1").hide();
$("#select2").hide();
$("#select3").show();
$("#select4").hide();
$("#select5").hide();
$("#medium1").show();
$("#board1").show();
}
if (optionValue == "For_lang") {
$("#select1").hide();
$("#select2").hide();
$("#select3").hide();
$("#select4").hide();
$("#medium1").hide();
$("#board1").hide();
$("#select5").show();
}
});
}).change();
});
</script>
---- body ----
<div class="col-sm-6 mb-3 ">
<div class="form-group">
<label for="name_of_business" class="font-weight-bold coac fw-bold">Standard</label>
<br>
<select name="std1" class="font-weight-bold" id="standardone">
<option value="ss">Select Standard</option>
<option value="C_1-4">Class 1-4</option>
<option value="C_5-8">Class 5-8</option>
<option value="C_9">Class 9</option>
<option value="C_10">Class 10</option>
<option value="11-12_C">11th-12th Commerce</option>
<option value="11-12_S">11th-12th Science</option>
<option value="IIT-JEE">IIT-JEE</option>
<option value="NEET">NEET</option>
<option value="For_lang">Foreign Langauges</option>
</select>
</div>
</div>
<div class="col-sm-6 mb-3">
<div class="form-group">
<label class="font-weight-bold fw-bold">Subjects</label>
<br>
<select name="sub11" class="font-weight-bold" id="select1">
<option value="ss">Select Subject</option>
<option value="all_sub">All Subjects</option>
</select>
<select name="sub12" class="font-weight-bold" id="select2">
<option value="ss">Select Subject</option>
<option value="all_sub">All Subjects</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="Maths">Maths</option>
</select>
<select name="sub13" class="font-weight-bold" id="select3">
<option value="ss">Select Subject</option>
<option value="all_sub">All Subjects</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="Biology">Biology</option>
</select>
<select name="sub14" class="font-weight-bold" id="select4">
<option value="ss">Select Subject</option>
<option value="all_sub">All Subjects</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="Maths">Maths</option>
<option value="Biology">Biology</option>
</select>
<select name="sub15" class="font-weight-bold" id="select5">
<option value="ss">Select Languge</option>
<option value="Spoken_English">Spoken English</option>
<option value="German">German</option>
<option value="French">French</option>
<option value="Spanish">Spanish</option>
</select>
</div>
</div>
Solution 1:[1]
Please check this, it may help you.
---------body------------
<div class="col-sm-6 mb-3 "> <div class="form-group">
<label for="name_of_business" class="font-weight-bold coac fw-bold">Standard</label>
<br>
<select name="std1" class="font-weight-bold" id="standardone">
<option value="ss">Select Standard</option>
<option value="C_1-4">Class 1-4</option>
<option value="C_5-8">Class 5-8</option>
<option value="C_9">Class 9</option>
<option value="C_10">Class 10</option>
<option value="11-12_C">11th-12th Commerce</option>
<option value="11-12_S">11th-12th Science</option>
<option value="IIT-JEE">IIT-JEE</option>
<option value="NEET">NEET</option>
<option value="For_lang">Foreign Langauges</option>
</select> </div> </div>
<div class="col-sm-6 mb-3"> <div class="form-group">
<label class="font-weight-bold fw-bold">Subjects</label>
<br>
<select name="sub11" class="font-weight-bold" id="select1">
<option value="ss">Select Subject</option>
<option value="all_sub">All Subjects</option>
</select> </div> </div>
---------script----------
<script>
var _select2="Physics,Chemistry,Maths";
var _select3="Physics,Chemistry,Biology";
var _select4="Physics,Chemistry,Maths,Biology";
var _select5="Spoken_English,German,French,Spanish";
$(document).ready(function() {
$("#standardone").change(function(e) {
var optionValue = $(this).val();
var _optionsToAdd="";
$("#select1").html('<option value="ss">Select Subject</option><option value="all_sub">All Subjects</option>');
if (optionValue == "ss" || optionValue == "C_1-4" || optionValue == "C_5-8" || optionValue == "C_9" || optionValue == "C_10" || optionValue == "C_9-10" || optionValue == "11-12_C") {
_optionsToAdd="";
}
if (optionValue == "11-12_S") {
_optionsToAdd=_select4;
}
if (optionValue == "IIT-JEE") {
_optionsToAdd=_select2;
}
if (optionValue == "NEET") {
_optionsToAdd=_select3;
}
if (optionValue == "For_lang") {
_optionsToAdd=_select5;
}
if(_optionsToAdd!=="")
{
var _arr=_optionsToAdd.split(",");
var _count=_arr.length;
var _existHtml = $("#select1").html();
for(var _byt=0; _byt<_count; _byt++)
{
var _data=_arr[_byt];
_existHtml+='<option value="'+_data+'">'+_data+'</option>';
}
$("#select1").html(_existHtml);
}
});
});
</script>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Web Developer |