Question

如何从数据库获取值到变更事件？这是示例

$（“＃widgetpanel”）。html（'＆gt; data =“http：// localhost：8080 / guest？key ='+ $（this）.val（）+'item = ??”＆gt; “）;

我使用下面的方法从下拉列表获取密钥但我无法从路由器获取项目值。请告知如何从路由器获取第三个值以附加到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%"/>

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

1 个答案: