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

【问题标题】：Different type of input method open for different type value select from dropdown list?为不同类型的值打开不同类型的输入法从下拉列表中选择？
【发布时间】：2017-07-21 04:19:14
【问题描述】：

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

例如

如果用户从下拉列表中选择标题、声明等，则在 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>

【问题讨论】：

上面的下拉菜单是静态的还是动态的？
静态但输入类型取决于值如果用户选择日期值然后输入类型日期范围打开等，则从下拉列表中选择

标签： javascript php jquery html

【解决方案1】：

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

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

【讨论】：

如何在变量中存储下拉列表的值和输入类型？请帮忙
你可以像$('#S1value'),val()这样获取下拉列表的值。如果你想将数据存储在php中意味着你需要在里面有这个表格具有方法和动作属性的表单元素。在提交表单时，值将传递到动作中提到的文件，然后您可以将其存储
我想在输入日期中给出日期范围我们如何改进这一点
您可以使用 JQuery UI 日期选择器，或者有很多可用的插件，例如 datetimepicker
如何将输入值存储在变量中？在默认下拉列表中为什么不显示输入字段？

【解决方案2】：

我刚刚添加了代码。要显示日期选择器，您需要为此添加代码。将根据您的选择添加 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>

【讨论】：

或者您可以在上添加一个属性并基于 $("#S1value option:selected ").attr('inputType');
如果用户从下拉列表中选择日期类型，则输入类型日期范围打开

【解决方案3】：

你必须在选择标签之后输入一个输入。然后使用下面给出的 jQuery。

$("#S1value").on("change",function(){
	var value = $(this).val();
	switch(value) {
		case "Title":
			$("#input-select").attr("type","text");
			break;
		case "Application_Date":
			$("#input-select").attr("type","date");
			break;
		default:
		$("#input-select").attr("type","text");
	}
});

<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>
<input class="input form-control" id="input-select" type="text" />

【讨论】：

【解决方案4】：

使用 switch 语句来显示你想要的控件。

在您发布表单时使用下面的代码，这些值将以$_Post[Name] 的形式提供，其中名称将是所选选项的值。

所以你可以使用：

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

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

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

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>

【讨论】：

我想去掉输入法附近文字的打印值怎么办？
把这个：var label = $("<label />").attr("for", value).html(txt + ": ");改成这个：var label = $("<label />").attr("for", value);
如果我在打开本地主机时将 html 代码放入并将脚本代码放入正文中，为什么它不起作用？请帮忙
这是一个与此无关的完全不同的问题。随意打开一个新问题，显示您的完整代码以及您遇到的错误。
我们如何打印下拉和输入框同一行以及如何在它们之间留出空间请告诉我？

【解决方案5】：

这里还有一个解决方案https://jsfiddle.net/6gaagjze/

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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>

【讨论】：