如何从动态数据下拉列表中显示选择选项答案

【问题标题】：How to display select option from dynamic data drop down list如何从动态数据下拉列表中显示选择选项
【发布时间】：2017-03-08 08:41:30
【问题描述】：

我的概念是执行信用卡验证。在信用卡年份，数据应该根据当前年份动态生成。它应该只显示未来几年。例如。我们在 2016 年.. 这样下拉数据将像 2016 年到 2040 年一样显示.. 下拉数据是动态的.. 我也实现了.. 但是，这里我的问题是显示“选择选项”

我想首先显示选择选项以执行验证.. 给我一些想法来做到这一点.. 这是我的示例代码..

<select id="ccyear" name="ccyear"></select><br>
    <span>
    <script>
    var start =new Date().getFullYear();
    var end = new Date().getFullYear() + 24;
    var options = "";
	for(var year = start ; year <=end; year++)
	{
    options += "<option>"+ year +"</option>";
	}
	document.getElementById("ccyear").innerHTML = options;
    </script>
    </span>

【问题讨论】：

你也应该添加 value 属性来做到这一点。就像这样.. for(var year = start ; year "+年+""; } 然后试试看。
没有得到你的问题。@Nithya
是的...请完美解释您的问题..令人困惑..！
我想在下拉列表中显示“选择选项”。如果用户点击“选择”，那么我想显示年份列表..
你可以试试这个... 替换 var options = ""; with var options = "";这样第一个选项将是 Select Option

标签： javascript php jquery html css

【解决方案1】：

onchange事件很容易获取用户选择的值

<select id="ccyear" name="ccyear" onchange="test()"></select><br>
    <span>
    <script>
     ( function (){
    var start =new Date().getFullYear();
    var end = new Date().getFullYear() + 24;
    var options = "";
	for(var year = start ; year <=end; year++)
	{
    options += "<option>"+ year +"</option>";
	}
	document.getElementById("ccyear").innerHTML = "<option>Select option</option>"+options;
       console.log( document.getElementById("ccyear").value);
        })()
     function test(){
        console.log( document.getElementById("ccyear").value);
       }
    </script>
    </span>

【讨论】：

您的代码也从“年”开始显示。我想显示“选择选项”..如果用户点击“选择”然后在下拉列表中显示年份列表

【解决方案2】：

试试这个...

<select id="ccyear" name="ccyear"></select><br>
    <span>
    <script>
   var start =new Date().getFullYear();
   var end = new Date().getFullYear() + 24;
   var options = "";
   var i = 0;
   for(var year = start ; year <=end; year++)
   {
	 if (i == 0){
		options += "<option selected>Select option</option>";
		i++;
	 } else {
		options += "<option value="+ year+">"+ year +"</option>";
     }

 }
document.getElementById("ccyear").innerHTML = options;
</script>
    </span>

【讨论】：

【解决方案3】：

将此var options = ""; 行更改为var options = "<option>Select Option</option>";

<select id="ccyear" name="ccyear"></select><br>
    <span>
    <script>
    var start =new Date().getFullYear();
    var end = new Date().getFullYear() + 24;
    var options = "<option>Select Option</option>";
	for(var year = start ; year <=end; year++)
	{
    options += "<option>"+ year +"</option>";
	}
	document.getElementById("ccyear").innerHTML = options;
    </script>
    </span>

【讨论】：

@Nithya 我猜你对接受答案有点困惑。 :D

【解决方案4】：

你可以使用 jQuery 的 append 函数来做到这一点。另外我建议为每个选项元素提供一个 value 属性。

您的代码将如下所示。

var start = new Date().getFullYear();
var end = start + 24;
for (var year = start; year <= end; year++) {
  console.log("loop");
  $("#ccyear").append('<option value="' + year + '">' + year + '</option>');
}

您可以在此处查看代码 https://jsfiddle.net/arijitkanrar/pfgwa2n2/

【讨论】：

【解决方案5】：

我认为这对你有用

<select id="ccyear" name="ccyear">
    <option value=''> Select Project </option>
</select><br>
<script>
var start =new Date().getFullYear();
var end = new Date().getFullYear() + 24;
var options = "";
for(var year = start ; year <=end; year++)
{
options += "<option>"+ year +"</option>";
}
document.getElementById("ccyear").innerHTML = "<option value=''> Select Option </option>"+options;
</script>

【讨论】：

【解决方案6】：

改变这个：

var options = "";

到这里：

var options = "<option>Select Option</option>";

Here is the JSFiddle demo

【讨论】：

【解决方案7】：

如果您正在与php 合作，那么为什么不尝试与php script 合作

试试这个php 代码 -

<?php
date_default_timezone_set('Asia/Kolkata');
$current_year = date('Y');
$end_year = date('Y', strtotime('+24 year'));

$select = '<select id="ccyear" name="ccyear">';
for($i = $current_year; $i <= $end_year; $i++)
    $select .= '<option value="'.$i.'">'.$i.'</option>';

$select .= '</select>';

echo $select;
?>

【讨论】：