Question

将HTML选择下拉列表存储到JavaScript变量时，有什么好的做法。我还需要捕获他们选择的值并通过它。

我最初尝试使用jQuery创建选项并将其保存在变量中，但它会出错。

var keyNamesList = $('<option></option>').val('').html('Select a Key');

然后我使用了一个HTML字符串，并在一个循环中附加了选项列表，其中更多HTML表示为字符串。请参阅JSFIDDLE链接以获取模拟。

var keyNamesList = "<option value = ''> Select an item</option>"
keyNamesList += "<option value = '"+data.key+"'>" + data.value + "</option>";

JSFIDDLE

Answer 1

$('<option></option>')...

应该是$('option')。

PS：你想做什么？

Answer 2

使用append per选项并通过DOM api设置值和内容不太可能会导致性能受到很大影响，但一般来说，它被认为是避免多个append和dom变异的良好做法如果你可以调用我通常会构建一个单独的html字符串：

function getOptions(data, blank) {
    var optTpl = '<option value="%key%">%label%</option>',
        options = [];

    if (blank) {
      // if blank is truthy then append an option - if bool true then
      // a default label, otherwise use the value of blank as label
      options.push(optTpl
          .replace('%key%','')
          .replace('%label%', (blank === true ? 'Select one...' : blank))
      ); 
    } 

    $.each(data, function (i, datum){
        options.push(optTpl
          .replace('%key%',datum.key)
          .replace('%label%', datum.value)
        ); 
    });

    return options.join('');
}

// usage:
$('theSelectElement').append(getOptions(data, 'Select something!'));

我喜欢使用一种模板并调用字符串替换，但您可以像在问题中提出的那样在每次迭代中构建字符串：

options.push("<option value = '"+data.key+"'>" + data.value + "</option>");

与您未整合的示例：http://jsfiddle.net/8tjwL6u5/

使用json数据更新多个下拉列表

2 个答案: