如何从数据库获取价值到变更事件？

Question

如何从DB获得价值到变化事件？这是一个例子

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

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

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

下面的代码使用nodejs路由器从DB检索值.

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
    });
});
});

下面的代码将DB值显示在下拉列表中(键,值).我可以在屏幕下方获取项目值{{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}}

下面的代码显示基于嵌入式屏幕的下拉值.我可以利用key,value来附加URL来获取相应的项目,但我还需要一个来自DB的附加到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%"/>