Question

我使用select中的array方法为innerHTML中的每个元素生成了Javascript框。我想拥有它，以便根据x [1]的值为每一行选择不同的选项。

基本上x [1]表示要订购的商品的数量，select框的目的是允许用户在确认订单之前调整数量。

for(i = 0; i < productArray.length; i ++){
        item = productArray[i];
        var x = item.split(':');
        var row = ordertable.insertRow(i + 1);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        cell1.innerHTML = x[0];
        cell2.innerHTML = x[1] + "<select>\n\
                    <option value='0'>0</option>\n\
                    <option value='1'>1</option>\n\
                    <option value='2'>2</option>\n\
                    <option value='3'>3</option>\n\
                      </select>";
        cell3.innerHTML =       "<input type='button' value='Delete' class='deleteBtn'/>"
    }

Answer 1

您需要添加if声明。

cell2.innerHTML = x[1] + "<select>";
cell2.innerHTML = cell2.innerHTML + "<option value='0'" + (x[1] == "0" ? "selected='selected'" : "") + ">0</option>";
cell2.innerHTML = cell2.innerHTML + "<option value='1'" + (x[1] == "1" ? "selected='selected'" : "") + ">1</option>";
cell2.innerHTML = cell2.innerHTML + "<option value='2'" + (x[1] == "2" ? "selected='selected'" : "") + ">2</option>";
cell2.innerHTML = cell2.innerHTML + "<option value='3'" + (x[1] == "3" ? "selected='selected'" : "") + ">3</option>";
cell2.innerHTML = cell2.innerHTML + "</select>";

另一个＆＃34; hack＆＃34;使用一行进行此操作的方法只是添加以下代码：

 cell2.innerHTML.replace("<option value='" + x[1] + "'>" + x[1] + "</option>","<option value='" + x[1] + "' selected='selected'>" + x[1] + "</option>");

所以最终的代码如下：

for(i = 0; i < productArray.length; i ++){
        item = productArray[i];
        var x = item.split(':');
        var row = ordertable.insertRow(i + 1);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        cell1.innerHTML = x[0];
        cell2.innerHTML = x[1] + "<select>\n\
                    <option value='0'>0</option>\n\
                    <option value='1'>1</option>\n\
                    <option value='2'>2</option>\n\
                    <option value='3'>3</option>\n\
                      </select>";
        cell2.innerHTML.replace("<option value='" + x[1] + "'>" + x[1] + "</option>","<option value='" + x[1] + "' selected='selected'>" + x[1] + "</option>");
        cell3.innerHTML =       "<input type='button' value='Delete' class='deleteBtn'/>"
    }

Answer 2

这是我的方法：

var arr = ["<option value='0'>0</option>",
           "<option value='1'>1</option>",
           "<option value='2'>2</option>",
           "<option value='3'>3</option>"];

var i = x[1];
arr[i] = arr[i].substring(0, 8) + " selected='selected' " + arr[i].substring(8);


cell2.innerHTML = "<select>\n" + arr.join("\n") + "</select>";

Answer 3

您可以向<select>添加唯一ID，然后在循环结束时说

document.getElementById("mySelectId").selectedIndex = x[1];

注意，索引是基数为零

Answer 4

看起来您可以使用for循环和if语句来实现您要执行的操作，请尝试以下操作：

var content = x[1]+"<select>";
for (var i=0; i<3; i++) {
    content += "<option value='"+i+"'"+((x[1] == i) ? " selected='selected'" : "")+">"+i+"</option>";
}
content += "</select>";

并将您的cell2更改为

cell2.innerHTML = content;

希望这就是你要找的东西！

根据条件动态设置所选选项的最佳方法

4 个答案: