javascript - 如何从 DB 获取值到 on-change 事件？

Question

如何从 DB 获取值到 on-change 事件？这是例子

$("#widgetpanel").html(' >data="http://localhost:8080/guest?key='+$(this).val()+'item=??">');

我使用以下方法从下拉列表中获取键，但无法从路由器获取项目值。请告知如何从路由器获取第三个值以附加到 URL 字符串中？

我的要求是从数据库中获取数据以显示在下拉列表中，并根据下拉值更改 URL 以在屏幕上显示不同的项目。

下面的代码使用 nodejs 路由器从数据库中检索值。

router.get('/', function(req, res, next) {
c.query("SELECT w.title,w.key,w.item FROM widgets as w", function(err, rows, fields){
    if(err) throw err;
    //console.log(rows);
    res.render('index', {
        "widgets": rows
    });
});
});

下面的代码将数据库值显示为下拉列表(键，值)。我可以在下面的屏幕上获取项目值 {{item}}，但我不想在这里。

{{#if widgets}}

     <select id="key">
     <option value="">Select</option>
            {{#each widgets}}  

            <option value="{{key}}">{{title}}</option>
            {{/each}}
      </select>


{{else}}
<p>No Projects</p>
{{/if}}

下面的代码显示了基于嵌入式屏幕的下拉值。我可以利用键、值附加 URL 来获取相应的项目，但我需要从数据库中再添加一个附加到 URL 字符串，即“Item”。

$("#key").on('change',function(){
$("#widgetpanel").html('data="http://localhost:8080/guest?key='+$(this).val()+'item=??">');


});

Answer 1

您可以在 <option> 上使用额外的属性标签来存储您的项目。您的渲染代码如下所示:

<select id="key">
<option value="">Select</option>
   {{#each widgets}}
   <option value="{{key}}" data-item="{{item}}">{{title}}</option>
   {{/each}}
</select>

然后你的 javascript 看起来像:

$('#key').on('change', function() {
   var $o = $(this).children('option:selected');
   $("#widgetpanel").html('data="http://localhost:8080/guest?key='+$o.attr('value')+'item='+$(o).attr('data-item')+'">');
});

例子:

$('#key').on('change', function() {
  var $selectedOption = $(this).children('option:selected');
  var selectedKey = $selectedOption.attr('value');
  var selectedItem= $selectedOption.attr('data-item');
  var url = "http://localhost:8080/guest?key="+selectedKey+"&item="+selectedItem;
  $('#log').val(url);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="key">
  <option value="">Select</option>
  <option value="key1" data-item="item1">Title 1</option>
  <option value="key2" data-item="item2">Title 2</option>
  <option value="key3" data-item="item3">Title 3</option>
  <option value="key4" data-item="item4">Title 4</option>
</select>
<input type="text" id="log" style="width:100%"/>