代码之家 › 专栏 › 技术社区 › user2848031

如何在更改事件时从DB获取值?

handlebars.js web node.js javascript

user2848031 · 技术社区 · 6 年前

如何从DB获取更改事件的值?下面是一个例子

$(“#widgetpanel”)。html(“>数据=”http://localhost:8080/guest?key=“+$(此)。val()+'item=??“>”);

我正在使用下面的方法从下拉列表中获取密钥,但我无法从路由器中获取项目值。请建议如何从路由器获取第三个值以附加到URL字符串中?

我的要求是从DB获取数据以显示在下拉列表中,并根据下拉列表值更改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字符串的项。

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


});

1 回复 | 直到 6 年前

Briley Hooper 6 年前

可以在 <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%"/>