文件名：dynamicShowOptionOfSelectInHtml.html

<!DOCTYPE html>
<html lang="zh">
<!--
动态显示select的option列表
使用{{}}作为变量分界符
-->
 <head>
  <meta charset="UTF-8">
  <title>动态显示select的option列表</title>
  <script>
    function extractKey(fieldname, item) {
        var text = "";
        var tmp_fieldname = fieldname;

        var beginIndex = tmp_fieldname.indexOf("{{");
        var endIndex = tmp_fieldname.indexOf("}}");
        if (beginIndex === -1) {
            if (endIndex === -1) {
                return item[fieldname];
            }
        }
        while (beginIndex > -1) {

            if (beginIndex > endIndex) {
                return 'ERROR_' + fieldname;
            }
            var varname = tmp_fieldname.substring(beginIndex + ("{{".length), endIndex);
            console.log('varname', varname);
            tmp_fieldname = tmp_fieldname.replace("{{" + varname + "}}", item[varname]);
            console.log('tmp_fieldname', tmp_fieldname);
            beginIndex = tmp_fieldname.indexOf("{{");
        }
        return tmp_fieldname;
    }
    function convert(orgdata, textfield, valuefield) {
          var optionArr = [];
          for (item of orgdata) {
              var _name = "" + extractKey(textfield, item);
              var _value = "" + extractKey(valuefield, item);
//              var _name = "" + item[textfield];
//              var _value = "" + item[valuefield]
              optionArr.push({ key: _value, text: _name, value: _value, 'data-datasource': item });
          }
          return optionArr;
    }

    var testDataArr = [
        {"id": 1, "name": "张三", "age": 11},
        {"id": 2, "name": "李四", "age": 23},
        {"id": 3, "name": "王五", "age": 56},
    ]

    function clickMe1() {
        var options = convert(testDataArr, 'name', 'id');
        console.log('options1', options);
        replaceOptions(options);
    }
    function clickMe2() {
        var options = convert(testDataArr, '{{name}}', 'id');
        console.log('options2', options);
        replaceOptions(options);
    }
    function clickMe3() {
        var options = convert(testDataArr, '{{name}}({{age}})', 'id');
        console.log('options3', options);
        replaceOptions(options);
    }
    function clickMe4() {
        var options = convert(testDataArr, '-{{name}}-({{age}})-', 'id');
        console.log('options4', options);
        replaceOptions(options);
    }
    function clickMeError() {
        var options = convert(testDataArr, 'name}}', 'id');
        console.log('optionsError', options);
        replaceOptions(options);
    }
    function replaceOptions(options) {
        var optionHtml = '';
        for (option of options) {
            optionHtml += '<option value="' + option.value + '">' + option.text + '</option>';
        }
        document.getElementById('user').innerHTML = optionHtml;
    }
  </script>
 </head>
 <body>
  <input type="button" onclick="clickMe1()" value="clickMe1()"><br/>
  <input type="button" onclick="clickMe2()" value="clickMe2()"><br/>
  <input type="button" onclick="clickMe3()" value="clickMe3()"><br/>
  <input type="button" onclick="clickMe4()" value="clickMe4()"><br/>
  <input type="button" onclick="clickMeError()" value="clickMeError()"><br/>

  <br/>
  <select id='user'>
  </select>
 </body>
</html>
作者：admin  创建时间：2023-07-07 21:57
最后编辑：admin  更新时间：2025-09-19 10:08