我有一个下拉菜单和笔记,我想在将它们发送到数据库之前保存在内存中。 我正在使用data函数来存储数据。 但我希望它在每次更改下拉选择时添加一个新项
下拉列表和注释是相关联的,因此用户可以选择不同的下拉列表并输入注释。 一旦他们完成,他们将保存和数据进入数据库。 当前,它一直在覆盖DataObject。 我该怎么防止呢?
我的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);
});
我将使用的值作为对象的属性名,并使用注释文本作为特定类型的值。
使用select的change事件更新文本区域,这样您也可以在不同的注释之间切换。
类似于:
null
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>