When I choose a number in the first select
it immediately generates the number of selects equal to the one I chose,
in that select I can choose an age, but if I repent and choose now that 6 selects are generated I want the first 4 not to change their value And only the remaining ones
And i like that the news select Appear horizontally
<label class="col-sm-1 control-label">Kids:</label> <%-- <input type="text" class="form-control" name="Minors" value="<%=(package!= null && package.request!=null)? package.request.Minors :0 %>"/> </div>--%> <div class="col-sm-2"> <select class="chosen-select" style="width: 350px;" name="Minors" id="cbo-select"> <%for (int i = 0; i <= maxKids; i++) { %> <option value="<%=i %>" name="Minors"><%=i%></option> Minors = i; <% } %> </select> </div> </div> </div> <div class="row"> <div class="form-group col-sm-12" id="area"> </div> **//////////// javascript
function selectedElementChanged() { <%var ageKids = (int) ViewData["ageKids"];%> var ageKids = '<%=ageKids%>'; //$(".chosen-select").area.empty(); //$(".chosen-select").area.append('<select style="width: 20%;" name="KidAges" id="auto-select" class="chosen-select">' + // '</select>'); var selectedValue = $("#cbo-select").val(); $("#area").empty(); if (parseInt(selectedValue)) { for (var i = 0; i < selectedValue; i++) { $("#area") .append('<select class="form-control chosen-select" style="width: 20%;" name="KidAges" id="auto-select">' + '</select>'); } var i = 0; if (i >= 0) { $("select[name='KidAges']") .append('<option value ="0" name = "KidAges[0]" > < 1 </option></br>'); } for (i = 1; i <= ageKids; i++) { $("select[name='KidAges']").append('<option value=' + i + ' name="KidAges[' + i + ']" > ' + i + '</option>'); } } } 1 Answers
Answers 1
To maintain the existing dropdown values you must either store/restore values when repopulating the list or incrementally add/remove controls. The latter seems more efficient.
var desiredCount = $("#cbo-select").val(); desiredCount = parseInt(desiredCount); var area = $("#area"); var controls = area.children(); if (desiredCount) { var currentCount = controls.length; if (desiredCount < currentCount) { controls.slice(desiredCount).remove(); } else { for (var ii = currentCount; ii < desiredCount; ++ii) { area.append('<select class="form-control chosen-select" style="width: 20%;" name="KidAges" id="auto-select">' + '</select>'); } } } else { area.empty(); } 
0 comments:
Post a Comment