2017-07-26 63 views
0

如何在此代碼下拉列表中輸入文本和日期範圍 在同一行上的下拉列表和輸入和輸入字段是不同的行,但我想同一行的平均輸入字段在下拉列表的前面名單如何打印輸入文本字段在前面的下拉列表中?

請幫助我,我在jQuery的

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();
<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>

+0

除HTML從另一個職位的重用,你嘗試過什麼到目前爲止,你自己來完成這項工作?請告訴我們 –

+0

目前還不清楚你想要達到什麼目的,我無法在你的html中找到任何日期範圍,你也沒有顯示任何嘗試自己創建它,請告訴我們你期望的結果。 –

回答

0

<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>
是新

+1

感謝您的幫助,但它不打印同一行? – Khan

0

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

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

 
}); 
 
});
<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>

+0

看到我的問題運行代碼片段的文本和日期,我想要相同,但只有一行意味着在前面的下拉列表,而不是在下一行 – Khan

相關問題