获取数组中每个项目的ID,并附加到选项值中的每个项目

时间:2016-08-15 10:37:46

标签: javascript jquery arrays html-select

对于任何不正确的术语使用道歉,我是Javascript的新手,但希望我可以解释我期望帮助回答我的问题的结果。

在下面的代码中,我有一个dates数组,其中输出为......

["25/08/2016", "24/08/2016", "23/08/2016", "22/08/2016", "21/08/2016", "20/08/2016", "19/08/2016", "18/08/2016", "17/08/2016"]

然后我遍历这些日期并将每个日期追加到html选项,输出如下......

<select id="dayConstraintList" class="form-control input-lg">
    <option value="25/08/2016">25/08/2016</option>
    <option value="24/08/2016">24/08/2016</option>
    <option value="23/08/2016">23/08/2016</option>
    <option value="22/08/2016">22/08/2016</option>
    <option value="21/08/2016">21/08/2016</option>
    <option value="20/08/2016">20/08/2016</option>
    <option value="19/08/2016">19/08/2016</option>
    <option value="18/08/2016">18/08/2016</option>
    <option value="17/08/2016">17/08/2016</option>
</select>

以下是我当前的代码

var dates = [],
    end = moment(endDate),
    dif = moment(endDate, 'YYYY-MM-DD').diff(moment(startDate, 'YYYY-MM-DD'), 'days');

if(dif <= 0) {
    return;
}

for(var i = 0; i < dif; i++) {
    dates.push(end.subtract(1,'d').format('DD/MM/YYYY'));
}

var option = '';
for (var i = 0; i < dates.length; i++) {
    option += '<option value="' + dates[i] + '">' + dates[i] + '</option>';
}
console.log(dates);
$('#dayConstraintList').empty();
$('#dayConstraintList').append(option);

这是我期望的结果,我怎样才能做到这一点?任何帮助将不胜感激?

<select id="dayConstraintList" class="form-control input-lg">
    <option value="0">25/08/2016</option>
    <option value="1">24/08/2016</option>
    <option value="2">23/08/2016</option>
    <option value="3">22/08/2016</option>
    <option value="4">21/08/2016</option>
    <option value="5">20/08/2016</option>
    <option value="6">19/08/2016</option>
    <option value="7">18/08/2016</option>
    <option value="8">17/08/2016</option>
</select>

3 个答案:

答案 0 :(得分:2)

您必须更改此部分代码:

for (var i = 0; i < dates.length; i++) {
    option += '<option value="' + dates[i] + '">' + dates[i] + '</option>';
}

通过:

for (var i = 0; i < dates.length; i++) {
    option += '<option value="' + i + '">' + dates[i] + '</option>';
}

答案 1 :(得分:0)

你改变了

<option value="' + dates[i] + '">' + dates[i] + '</option>

<option value="' + i + '">' + dates[i] + '</option> 

答案 2 :(得分:0)

你也可以按照以下方式完成这项工作;

isInDB
var dates = ["25/08/2016", "24/08/2016", "23/08/2016", "22/08/2016", "21/08/2016", "20/08/2016", "19/08/2016", "18/08/2016", "17/08/2016"],
    selel = document.getElementById("dayConstraintList");
    
selel.appendChild(dates.map(d => {var opel = document.createElement("option"); opel.value = d; opel.textContent = d; return opel})
                       .reduce((df,opel) => (df.appendChild(opel), df),document.createDocumentFragment()));