时间戳

首页 > 解决方案 > jquery：如何使用 jquery 函数为不同的下拉菜单存储数据

jquery - jquery：如何使用 jquery 函数为不同的下拉菜单存储数据

问题描述

我有一个下拉菜单和注释，我想在将它们发送到数据库之前将它们保存在内存中。我正在使用数据函数来存储数据。但我希望它在每次更改下拉选择时添加一个新项目

下拉列表和注释相关联，因此用户将选择不同的下拉列表并输入注释。完成后，他们将保存并将数据输入数据库。目前它一直在覆盖数据对象。我该如何防止呢？

我的html：

<select id="dpselect">
<option value="technical">Technical</option>
<option value="memory">memory link</option>
<option value="version">version</option>
</select>

<textarea id="Note" rows="4" cols="60" maxlength="250">

我的jQuery：

var dataObj = {};
//Handle data store when dropdown value is changed
$('#dpselect').change(function() {
    var dpvalue = $('#dpselect').val();
    $(dataObj).data("type", dpvalue);
});

//Handle data store when note value is changed
$('#Note').blur(function() {
    var note = $('#Note').val();
    $(dataObj).data("Note", note);
});

标签： jquery

解决方案

我会在您使用<select>对象的属性名称和注释文本作为该特定类型的值的情况下执行此操作。

使用 select 的 change 事件来更新 textarea，以便您还可以在不同的注释之间切换。

就像是：

var dataObj = {};
//Handle data store when dropdown value is changed
$('#dpselect').change(function() {
  var type = $(this).val();
  $('#Note').val(dataObj[type] || '')
  console.clear()
  console.log(dataObj)
});

//Handle data store when note value is changed
$('#Note').blur(function() {
  // get current selected type from dropdown
  var type = $('#dpselect').val()
  var note = $('#Note').val();
  // update stored note for that type
  dataObj[type] = note;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="dpselect">
  <option value="technical">Technical</option>
  <option value="memory">memory link</option>
  <option value="version">version</option>
</select> 
<br/>
<textarea id="Note" rows="4" cols="60" maxlength="250"></textarea>

推荐阅读