Question

如果用户从下拉列表中选择不同类型的值，我不知道如何编写用于更改输入类型方法的JavaScript代码，请帮助我。

E.g

如果用户从下拉列表中选择标题，声明等，则在HTML前面的下拉列表中打开简单文本输入格式

如果用户选择其他日期类型的Application_date，则在HTML等下拉列表前打开日期范围输入类型

请告诉我如何在PHP中的变量中存储值请帮助

HTML代码

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

Answer 1

我刚刚添加了代码。要显示datepicker，您需要为此添加代码。将根据您的选择添加Bu输入。

function addInput(expression){
  switch(expression) {
    case "text":
        $("#S1value").after('<input class="input form-control" type="text">');
        break;
    case "date":
        $("#S1value").after('<input class="input form-control" type="date">');
        break;
    default:
        $("#S1value").after('<input class="input form-control" type="text">');        
  } 
}

$("#S1value").on("change",function(){
  $("input").remove();
  addInput($(this).find("option:selected").attr('inputtype'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select id="S1value" name="S1value" >
<option value="Claim" inputtype="text" >Claim - C</option>
<option value="Title"  inputtype="text">Title - T</option>
<option value="Description" inputtype="text" >Description - D</option>
<option value="Abstract" inputtype="text">Abstract - A</option>
<option value="Application_No"  inputtype="text">Application_Number - APN</option>
<option value="Priority_Number"  inputtype="text">Priority_Number - PN</option>
<option value="Record_Number"  inputtype="text">Record_Number - RN</option>
<option value="Priority_Date" inputtype="text">Priority_Date - PD</option>
<option value="Application_Date" inputtype="date" >Application_Date - APD</option>
<option value="Publication_Date"  >Publication_Date - PD</option>
<option value="US_Class" inputtype="text">US_Class - USC</option>
<option value="IPC_Class"  inputtype="text">IPC_Class - IPC</option>
<option value="CPC_Class" inputtype="text" >CPC_Class - CPC</option>
<option value="Priority_Country_Code" inputtype="text" >Priority Country Code - PCC</option>
<option value="Designate_States"  inputtype="text">Designate_States - DS</option>
<option value="Legal_Status_Current"  inputtype="text">Legal_Status_Current - LSC</option>
</select>

Answer 2

有一个自定义数据属性，它将告诉目标类型

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title> Sample Code </title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <style>

    </style>
</head>
<body>

<select id="S1value" name="S1value" onChange="createInput()" >
        <option data-type="text" value="Claim"  >Claim - C</option>
        <option data-type="text" value="Title"  >Title - T</option>
        <option data-type="text" value="Description"  >Description - D</option>
        <option data-type="text" value="Abstract" >Abstract - A</option>
        <option data-type="text" value="Application_No"  >Application_Number - APN</option>
        <option data-type="text" value="Priority_Number"  >Priority_Number - PN</option>
        <option data-type="text" value="Record_Number"  >Record_Number - RN</option>
        <option data-type="date" value="Priority_Date" >Priority_Date - PD</option>
        <option data-type="date" value="Application_Date"  >Application_Date - APD</option>
        <option data-type="date" value="Publication_Date"  >Publication_Date - PD</option>
        <option data-type="text" value="US_Class" >US_Class - USC</option>
        <option data-type="text" value="IPC_Class"  >IPC_Class - IPC</option>
        <option data-type="text" value="CPC_Class"  >CPC_Class - CPC</option>
        <option data-type="text" value="Priority_Country_Code"  >Priority Country Code - PCC</option>
        <option data-type="text" value="Designate_States"  >Designate_States - DS</option>
        <option data-type="text" value="Legal_Status_Current"  >Legal_Status_Current - LSC</option>
</select>

<span id="inputElementWrapper" ></span>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script>
       function createInput(){
           var type = $('#S1value').find(':selected').data('type');
               var input = document.createElement('input');
               input.type=type;
               input.name = "option";
               $('#inputElementWrapper').html("");
               $('#inputElementWrapper').append(input);
       }
	</script>
</body>
</html>

＆＃13;

Answer 3

您必须在select标签后输入一个输入。然后使用下面给出的jQuery。

＆＃13;

#set($inputRoot) = $input.path('$'))
{
    "QueryID": "$inputRoot.QueryID",
    "nR": $inputRoot.nR,
    "Inarray": [
#foreach($elem in $inputRoot.Inarray)
{
    "ids":$elem.ids,
    "contents": "$elem.contents
}
#if($foreach.hasNext),#end
#end
]
}

＆＃13;

.*\n.*\nLINE 5

＆＃13;

Answer 4

使用switch语句显示所需的控件。

发布表单时使用以下代码，这些值将显示为$_Post[Name]，其中name将是所选选项的值。

所以你可以使用：

$S1value = $_Post["Name"];
$S1input = $_Post[$S1value];

由于您有Application_Date的日期范围，如果是选定的选项，您将有两个输入：

$S1value = $_Post["Name"];
$S1input = $_Post["Application_Date"];
$S1input2 = $_Post["Application_Date_2"];

＆＃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;

Answer 5

您可以再使用一个解决方案https://jsfiddle.net/6gaagjze/

document.readyState

$('#S1value').change(function(){
	$("input").remove();
	if($(this).val().indexOf('Date') < 0){
  	$('#S1value').parent().prepend('<input type="text" />');
  }else{
  	$('#S1value').parent().prepend('<input type="date" />');
  }
});

从下拉列表中选择不同类型的输入法打开不同类型的值？

5 个答案: