Question

在选择儿童年龄字段时，它将显示两个选择字段但它们并没有显示内联。我只希望它们像前两个选择字段一样并排内联。这是我的代码。

function addFields() {
	var number = document.getElementById("selected_childs[]").value;
	var childage = document.getElementById("childage");

	//Create array of options to be added
	var array = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];

	while (childage.hasChildNodes()) {
		childage.removeChild(childage.lastChild);
	}
	if (number == 1) {
		// statement
		for (i = 0; i < number; i++) {
			childage.appendChild(document.createTextNode("Children Age " + (i + 1)));

			var selectList = document.createElement("select");
			selectList.setAttribute("id", "mySelect");
			selectList.setAttribute("class", "form-control");
			childage.appendChild(selectList);
			childage.appendChild(document.createElement("br"));

			//Create and append the options
			for (var j = 0; j < array.length; j++) {
				var option = document.createElement("option");
				option.setAttribute("value", array[j]);
				option.text = array[j];
				selectList.appendChild(option);
			}
		}
	} else {
		// statement
		for (i = 0; i < number; i++) {
			childage.appendChild(document.createTextNode("Children Age " + (i + 1)));

			var selectList = document.createElement("select");
			selectList.setAttribute("id", "mySelect");
			selectList.setAttribute("class", "form-control");
			childage.appendChild(selectList);
			childage.appendChild(document.createElement("br"));

			//Create and append the options
			for (var j = 0; j < array.length; j++) {
				var option = document.createElement("option");
				option.setAttribute("value", array[j]);
				option.text = array[j];
				selectList.appendChild(option);
			}
		}

	}
}

<!DOCTYPE html>
<html>
   <head>
      <title>Welcome|Home</title>
      <!-- Latest compiled and minified CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <!-- jQuery library -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <!-- Latest compiled JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   </head>
   <body>
      <form method="POST" action="<?php echo base_url(); ?>index.php/dynamically_added_controller/Dynamically/addingValues">
         <div class="this_is_field_wrapper">
            <div class="row">
               <div class="form-group">
                  <div class="col-xs-1">
                     <h6>Options -</h6>
                     <h6 class="#">Adults(12+)</h6>
                     <select id="selected_adults[]" name="selected_adults[]" class="form-control">
                        <option   value="1">1</option>
                        <option selected="selected" value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                     </select>
                  </div>
                  <!-- </div>
                     <div class="form-group"> -->
                  <div class="col-xs-1">
                     <h6>1st Room</h6>
                     <h6 class="m_label">Child(0-12)</h6>
                     <select id="selected_childs[]" name="selected_childs[]" value="" onchange="addFields()" class="form-control">
                        <option>--select--</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                     </select>
                  </div>
                  <!-- </div>
                     <div class="form-group"> -->
                  <div id="childage" class="col-xs-1">
                  </div>
                  <!-- </div>
                     <div class="form-group"> -->
                  <div id="childage" class="col-xs-1">
                  </div>
                  <div class="col-xs-1">
                     <a href="javascript:void(0);" class="this_button_work_for_click_to_add_rooms" title="Add field">Click & Add Rooms</a>                     	
                  </div>
               </div>
               <!-- here ending form group -->
            </div>
            <!-- here ending row -->
         </div>
         <button type="submit" value="submit">click to submit</button>
      </form>
   </body>
</html>

问题是当您通过选择字段选择儿童房时，它们将显示两个字段，但它们显示的是上下。我只希望它们并排，就像前两个选择字段一样。请帮忙预先感谢。

Answer 1

您的第二个选择未放置在右div中。看看你能做什么：

function addFields() {
var number = document.getElementById("selected_childs[]").value;
var childage = document.getElementById("childage0");

//Create array of options to be added
var array = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];

while (childage.hasChildNodes()) {
    childage.removeChild(childage.lastChild);
}
if (number == 1) {
    // statement
    for (i = 0; i < number; i++) {
        var h = document.createElement("h6");
     var h1 = document.createElement("h6");
  h1.appendChild(document.createTextNode(" "));
  childage.appendChild(h1);

        h.appendChild(document.createTextNode("Children Age " + (i + 1)));
  childage.appendChild(h);

        var selectList = document.createElement("select");
        selectList.setAttribute("id", "mySelect");
        selectList.setAttribute("class", "form-control");
        childage.appendChild(selectList);
        childage.appendChild(document.createElement("br"));

        //Create and append the options
        for (var j = 0; j < array.length; j++) {
            var option = document.createElement("option");
            option.setAttribute("value", array[j]);
            option.text = array[j];
            selectList.appendChild(option);
        }
    }
} else {
    // statement
    for (i = 0; i < number; i++) {
  childage = document.getElementById("childage"+i);
  var h1 = document.createElement("h6");
  h1.appendChild(document.createTextNode(" "));
  childage.appendChild(h1);
  var h = document.createElement("h6");
        h.appendChild(document.createTextNode("Children Age " + (i + 1)));
  childage.appendChild(h);

        var selectList = document.createElement("select");
        selectList.setAttribute("id", "mySelect");
        selectList.setAttribute("class", "form-control");
        childage.appendChild(selectList);
        childage.appendChild(document.createElement("br"));

        //Create and append the options
        for (var j = 0; j < array.length; j++) {
            var option = document.createElement("option");
            option.setAttribute("value", array[j]);
            option.text = array[j];
            selectList.appendChild(option);
        }
    }

}

}

为您的孩子DIV添加数字：

 <div id="childage0" class="col-xs-1">
              </div>
              <!-- </div>
                 <div class="form-group"> -->
              <div id="childage1" class="col-xs-1">
              </div>

无法同时显示选择字段？

1 个答案: