如何在前面的下拉列表中打印输入文本字段？

Question

如何打印文本和日期范围的下拉列表和输入 在此代码下拉列表中的同一行和输入字段是不同的行，但我想在下拉列表前面的同一行平均输入字段

请帮助我，我是jQuery的新手

＆＃13;

＆＃13;

function showinput() {
  var value = $("#S1value").val();
  var txt= value.replace(/\_/g, " ");
  var label = $("<label />").attr("for", value).html(txt + ": ");
  switch (value) {
    case "Application_Date":
      var input = $("<input />").attr("type", "text").attr("name", value);
      var input2 = $("<input />").attr("type", "text").attr("name", value + "_2");
      label.append("From: ")
      label.append(input);
      label.append(" To: ");
      label.append(input2);
      $('#beforeSelect').html('').append(label);
      break;
  default:

      var input = $("<input />").attr("type", "text").attr("id", value);
      label.append(input);

 }
  $('#beforeSelect').html('').append(label);
  
}

$("#S1value").on("change", function() {
   showinput();
  
});
 showinput();

＆＃13;

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

<select id="S1value" name="S1value">
<option value="Claim"  >Claim - C</option>
<option value="Title"  >Title - T</option>
<option value="Description"  >Description - D</option>
<option value="Abstract" >Abstract - A</option>
<option value="Application_No"  >Application_Number - APN</option>
<option value="Priority_Number"  >Priority_Number - PN</option>
<option value="Record_Number"  >Record_Number - RN</option>
<option value="Priority_Date" >Priority_Date - PD</option>
<option value="Application_Date"  >Application_Date - APD</option>
<option value="Publication_Date"  >Publication_Date - PD</option>
<option value="US_Class" >US_Class - USC</option>
<option value="IPC_Class"  >IPC_Class - IPC</option>
<option value="CPC_Class"  >CPC_Class - CPC</option>
<option value="Priority_Country_Code"  >Priority Country Code - PCC</option>
<option value="Designate_States"  >Designate_States - DS</option>
<option value="Legal_Status_Current"  >Legal_Status_Current - LSC</option>
</select>

<div id="beforeSelect"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
    
    <select id="S1value" name="S1value">
    <option value="Claim"  >Claim - C</option>
    <option value="Title"  >Title - T</option>
    <option value="Description"  >Description - D</option>
    <option value="Abstract" >Abstract - A</option>
    <option value="Application_No"  >Application_Number - APN</option>
    <option value="Priority_Number"  >Priority_Number - PN</option>
    <option value="Record_Number"  >Record_Number - RN</option>
    <option value="Priority_Date" >Priority_Date - PD</option>
    <option value="Application_Date"  >Application_Date - APD</option>
    <option value="Publication_Date"  >Publication_Date - PD</option>
    <option value="US_Class" >US_Class - USC</option>
    <option value="IPC_Class"  >IPC_Class - IPC</option>
    <option value="CPC_Class"  >CPC_Class - CPC</option>
    <option value="Priority_Country_Code"  >Priority Country Code - PCC</option>
    <option value="Designate_States"  >Designate_States - DS</option>
    <option value="Legal_Status_Current"  >Legal_Status_Current - LSC</option>
    </select>
    
    <div id="beforeSelect">
    <span id="levelinp"></span>: <input type="text" id="Application_No">
    </div>
    
    <script>
    $("#S1value").on("change", function() {
       showinput();
      
    });
    function showinput() {
      var level = $("#S1value").val();
      $('#levelinp').html(level);
    }
    showinput();
    </script>

Answer 2

＆＃13;

＆＃13;

$(document).ready(function(){
	var newEl = $("<input>");
	newEl.name = $("#S1value");
	$("body").append(newEl);
	$("div").text($("#S1value").val()+":");
$("#S1value").on("change",function(){

$("#beforeSelect").text($(this).val()+":");

});
});

＆＃13;

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

<select id="S1value" name="S1value">
<option value="Claim"  >Claim - C</option>
<option value="Title"  >Title - T</option>
<option value="Description"  >Description - D</option>
<option value="Abstract" >Abstract - A</option>
<option value="Application_No"  >Application_Number - APN</option>
<option value="Priority_Number"  >Priority_Number - PN</option>
<option value="Record_Number"  >Record_Number - RN</option>
<option value="Priority_Date" >Priority_Date - PD</option>
<option value="Application_Date"  >Application_Date - APD</option>
<option value="Publication_Date"  >Publication_Date - PD</option>
<option value="US_Class" >US_Class - USC</option>
<option value="IPC_Class"  >IPC_Class - IPC</option>
<option value="CPC_Class"  >CPC_Class - CPC</option>
<option value="Priority_Country_Code"  >Priority Country Code - PCC</option>
<option value="Designate_States"  >Designate_States - DS</option>
<option value="Legal_Status_Current"  >Legal_Status_Current - LSC</option>
</select>

<div id="beforeSelect"></div>

＆＃13;

＆＃13;

＆＃13;