我正在尝试动态创建bootstrap元素。一切都很好,但我不能创建一个下拉。
我正在使用ColdFusion。我的div元素是:
gradle build
按钮vehicle_fields()负责创建一组新元素并增加其ID。
这是我的功能:
<div class="panel panel-primary"><div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse9">Vehicles</a>
</h4>
</div>
<div id="collapse9" class="panel-collapse collapse">
<div class="panel-body">
<input type="hidden" name="totalVehicles" id="totalVehicles" value="1" />
<div id="vehicle_fields"> </div>
<div class="form-group">
<label for="name" class="col-lg-2">Make:</label>
<div class="col-lg-2">
<input type="text" class="form-control" name="vehicleMake1" id="vehicleMake1" maxlength="50">
</div>
<label for="name" class="col-lg-2">Model:</label>
<div class="col-lg-2">
<input type="text" class="form-control" name="vehicleModel1" id="vehicleModel1" maxlength="50">
</div>
<label for="name" class="col-lg-2">Year:</label>
<div class="col-lg-2">
<input type="text" class="form-control" name="vehicleYear1" id="vehicleYear1" maxlength="20">
</div>
</div>
<div class="form-group">
<label for="name" class="col-lg-2">Color:</label>
<div class="col-lg-2">
<input type="text" class="form-control" name="vehicleColor1" id="vehicleColor1" maxlength="30">
</div>
<label for="name" class="col-lg-2">License Plate No:</label>
<div class="col-lg-2">
<input type="text" class="form-control" name="vehicleLicensePlate1" id="vehicleLicensePlate1" maxlength="20">
</div>
<label for="name" class="col-lg-2">License Plate State:</label>
<div class="col-lg-2">
<select id="vehicleLicensePlateState1" name="vehicleLicensePlateState1" class="selectpicker form-control">
<option value="XX" selected>Select</option>
<cfloop query="GetStates">
<cfoutput>
<option value="#GetStates.State#">#GetStates.State#</option>
</cfoutput>
</cfloop>
</select>
</div>
</div>
<div class="form-group">
<label for="name" class="col-lg-3">
<small>Press <span class="glyphicon glyphicon-plus gs"></span> to add another vehicle</small>.
</label>
<div class="input-group-btn">
<button class="btn btn-success" type="button" onclick="vehicle_fields();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button>
</div>
</div>
</div>
</div>
</div>
当我加载页面时,我设置了function vehicle_fields() {
vehicles++;
$("#totalVehicles").val(vehicles);
var objTo = document.getElementById('vehicle_fields')
var divtest = document.createElement("div");
divtest.setAttribute("class", "removeclassVehicle" + vehicles);
var rdiv = 'removeclass' + vehicles;
var htmlStr = '<div class="form-group"><label for="name" class="col-lg-2">Make:</label><div class="col-lg-2">';
htmlStr += '<input type="text" class="form-control" name="vehicleMake' + vehicles + '" id="vehicleMake' + vehicles + '" maxlength="50">';
htmlStr += '</div><label for="name" class="col-lg-2">Model:</label><div class="col-lg-2">';
htmlStr += '<input type="text" class="form-control" name="vehicleModel' + vehicles + '" id="vehicleModel' + vehicles + '" maxlength="50">';
htmlStr += '</div><label for="name" class="col-lg-2">Year:</label><div class="col-lg-2">';
htmlStr += '<input type="text" class="form-control" name="vehicleYear' + vehicles + '" id="vehicleYear' + vehicles + '" maxlength="20">';
htmlStr += '</div></div><div class="form-group"><label for="name" class="col-lg-2">Color:</label><div class="col-lg-2">';
htmlStr += '<input type="text" class="form-control" name="vehicleColor' + vehicles + '" id="vehicleColor' + vehicles + '" maxlength="30">';
htmlStr += '</div><label for="name" class="col-lg-2">License Plate No:</label><div class="col-lg-2">';
htmlStr += '<input type="text" class="form-control" name="vehicleLicensePlate' + vehicles + '" id="vehicleLicensePlate' + vehicles + '" maxlength="20">';
htmlStr += '</div><label for="name" class="col-lg-2">License Plate State:</label><div class="col-lg-2">';
htmlStr += '<div class="btn-group bootstrap-select form-control">';
htmlStr += '<select name="desiredLeaseTerm' + vehicles + '" id="vehicleLicensePlateState' + vehicles + '" name="vehicleLicensePlateState' + vehicles + '" class="selectpicker form-control">';
htmlStr += $("#vehicleLicensePlateState1").html();
htmlStr += '</select></div></div></div>';
htmlStr += '<div class="form-group"><label for="name" class="col-lg-3"><small>Press <span class="glyphicon glyphicon-minus gs"></span> to remove the vehicle</small></label><div class="input-group-btn"><button class="btn btn-danger" type="button" onclick="remove_vehicle_fields(' + preference + ');"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button></div></div>'
console.debug(htmlStr);
divtest.innerHTML = htmlStr;
objTo.appendChild(divtest)
}
function remove_vehicle_fields(rid) {
$('.removeclassVehicle' + rid).remove();
}
。
我不确定这是否是实现动态字段创建的最佳方式;但是,它对我有用。唯一的例外是vehicle = 1
。当我点击添加另一辆车时,它不会创建/显示。
有谁知道为什么?
谢谢
答案 0 :(得分:1)
看起来你可能有不匹配的div标签。
无论哪种方式,这里都是在Fiddle工作:
https://jsfiddle.net/DTcHh/39882/
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse9">Vehicles</a>
</h4>
</div>
<div id="collapse9" class="panel-collapse collapse">
<div class="panel-body">
<input type="hidden" name="totalVehicles" id="totalVehicles" value="1" />
<div id="vehicle_fields"> </div>
<div class="form-group">
<label for="name" class="col-lg-2">Make:</label>
<div class="col-lg-2">
<input type="text" class="form-control" name="vehicleMake1" id="vehicleMake1" maxlength="50">
</div>
<label for="name" class="col-lg-2">Model:</label>
<div class="col-lg-2">
<input type="text" class="form-control" name="vehicleModel1" id="vehicleModel1" maxlength="50">
</div>
<label for="name" class="col-lg-2">Year:</label>
<div class="col-lg-2">
<input type="text" class="form-control" name="vehicleYear1" id="vehicleYear1" maxlength="20">
</div>
</div>
<div class="form-group">
<label for="name" class="col-lg-2">Color:</label>
<div class="col-lg-2">
<input type="text" class="form-control" name="vehicleColor1" id="vehicleColor1" maxlength="30">
</div>
<label for="name" class="col-lg-2">License Plate No:</label>
<div class="col-lg-2">
<input type="text" class="form-control" name="vehicleLicensePlate1" id="vehicleLicensePlate1" maxlength="20">
</div>
<label for="name" class="col-lg-2">License Plate State:</label>
<div class="col-lg-2">
<select id="vehicleLicensePlateState1" name="vehicleLicensePlateState1" class="selectpicker form-control">
<option value="XX" selected>Select</option>
<cfloop query="GetStates">
<cfoutput>
<option value="#GetStates.State#">#GetStates.State#</option>
</cfoutput>
</cfloop>
</select>
</div>
</div>
<div class="form-group">
<label for="name" class="col-lg-3">
<small>Press <span class="glyphicon glyphicon-plus gs"></span> to add another vehicle</small>.
</label>
<div class="input-group-btn">
<button class="btn btn-success" type="button" onclick="vehicle_fields();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button>
</div>
</div>
</div>
</div>