根据javascript中给出的输入数字动态显示div的数量

Question

我想根据输入中获得的数字显示div。如果输入是3;我想要3个maindiv块出现。如果它变为1;只应出现1个maindiv块。有人建议解决方案吗？

function showTrips(){
        var argument = document.getElementById("Number_of_trips");
        var value = argument.options[argument.selectedIndex].text;
        var main = document.getElementById("mainform");
        var mains = document.getElementById("maindiv");
        var newdiv = document.createElement('div');
            newdiv.innerHTML = mains.innerHTML;

        for (var i = 1; i < value; i++)
        {
        
            main.appendChild(newdiv);

             }

        }

 <div class="col-lg-12 col-md-12 col-sm-12">
        <div class="panel panel-primary panel-group ">
            <div class="panel-body">
                <label for="Number of trips">Number_Of_Trips:</label>
                <select class="form-control" id="Numberoftrips" onchange="showTrips()" >
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
            </div>
        </div>
    </div>

    <form role="form" id="mainform" >
        <div class="container" >
            <div class="row" id="maindiv">
                <div class="col-lg-12 col-md-12 col-sm-12">
                    <div class="panel panel-primary panel-group ">
                        <div class="panel-heading">
                            <h3 class="panel-title">Trip Details</h3>
                        </div>
                      </div>
                  </div>
              </div>
          </div>
      </form>

我现在附上了html代码。

Answer 1

您的ID“行程次数”不是有效的ID，不应包含任何空格。

如果包含

    <select id="Numberoftrips">
    <option value="1">1</option>
    <option value="2" >2</option>
    <option value="3"selected="selected">3</option>
</select>

使用jquery，您可以尝试

        $(function(){
 $('#Numberoftrips').change(function(){
var argument = document.getElementById("Numberoftrips");
var value = argument.options[argument.selectedIndex].value;
            var main = document.getElementById("mainform");
            var mains = document.getElementById("maindiv");
     $( "#maindiv" ).empty();
            for (var i = 1; i <= value; i++)
            {


               var div = document.createElement('div');
maindiv.appendChild(div);
    div.className = 'aClassName';
    div.innerHTML = '<span class="">Hello world.</span>';

                 }});
});

不要忘记添加链接

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

请参阅jsfiddle

上的链接

Answer 2

尝试以下代码。 的 [更新]

＆＃13;

＆＃13;

function showTrips(){
        var argument = document.getElementById("Numberoftrips");
        var value = argument.options[argument.selectedIndex].text;

		var ni = document.getElementById("container");
		var mains = document.getElementsByClassName("row");
		var innerHt=mains[0].innerHTML;
		var newdiv = document.createElement('div');
		var divs=[];

		while (ni.firstChild) {
    ni.removeChild(ni.firstChild);
}
		for (var i = 1; i < value; i++)
        {
			var newdiv = document.createElement('div');
			newdiv.innerHTML = innerHt;
			var divIdName = 'my'+i+'Div';
			newdiv.className="row";
			newdiv.setAttribute('id',divIdName);
			divs[i]=newdiv;
			ni.appendChild(divs[i]);

        }
}
		

＆＃13;

<div class="col-lg-12 col-md-12 col-sm-12">
        <div class="panel panel-primary panel-group ">
            <div class="panel-body">
                <label for="Number of trips">Number_Of_Trips:</label>
                <select class="form-control" id="Numberoftrips" onchange="javascript:showTrips();" >
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
            </div>
        </div>
    </div>

    <form role="form" id="mainform" >
        <div id="container" class="container" >
            <div class="row" id="maindiv">
                <div class="col-lg-12 col-md-12 col-sm-12">
                    <div class="panel panel-primary panel-group ">
                        <div class="panel-heading">
                            <h3 class="panel-title">Trip Details</h3>
                        </div>
                      </div>
                  </div>
              </div>
          </div>
      </form>

＆＃13;

＆＃13;

＆＃13;