Question

我的网页中有一张表格，用于记录以前订单历史记录的详细信息。该表格包含以下列：

订单日期审核

现在，对于审核，我想要一个带有一些选项的选择下拉列表。当用户首次启动页面时，我希望先前的评级在选择下拉列表中显示为默认值。这是我的代码：

tds.push( {
    content: '<select id="clientReview" name="clientReview" value=' + obj.get("client_review") + '>' +
    '<option value=1>Hate it!</option>' +
    '<option value=2>Don't love it but don't hate it.</option>' +
    '<option value=3>Fantastic!</option>' 
});

我原本期望在选择中设置值会在下拉列表中设置默认值，但这不会发生。我仍然看到第一个值是默认值。知道如何解决这个问题吗？

Answer 1

将HTML插入文档后设置值怎么样？

<强> HTML：

<select id="dropdown">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>
<input id="textField" type="text" value="2" />

<强> JavaScript的：

(function() {
    var dropdown$ = $('#dropdown'),
        textField$ = $('#textField');

    function changeVal() {
        var val = parseInt(textField$.val());
        if(!!val && val > 0 && val < 4) {
            dropdown$.val(val);
        }
    }

    textField$.on('keyup', changeVal);

    changeVal();
})();

<强> DEMO

<option value="1" selected="selected">Text</option>

请参阅：
http://www.w3.org/wiki/HTML/Elements/option#HTML_Attributes
http://www.w3schools.com/tags/att_option_selected.asp

根据您的代码示例，我可以假设您稍后会使用此HTML插入某个位置。在这种情况下，您可以使用下一个代码：

tds.push( {
    content: '<select id="clientReview" name="clientReview" data-value="' + obj.get("client_review") + '">' +
    '<option value="1" >Hate it!</option>' +
    '<option value="2" >Don\'t love it but don\'t hate it.</option>' +
    '<option value="3" >Fantastic!</option>' +
    '</select>'
});

function insertDropdown(td$, dropdownHTML) {
    var dropdown$ = $(dropdownHTML);
    dropdown$.val(dropdown$.data('value'));
    td$.html(dropdown$);
}

for(var i = 0, l = tds.length; i < l; i++) {
    insertDropdown($('#td-' + i), tds[i].content);
}

<强> DEMO

设置<select>元素的默认值</select>

1 个答案: