1

我在 JavaScript 中创建了一些代码，允许用户将值添加到下拉菜单和下拉菜单从中提取和显示值的三个数组。我想知道是否有一种方法可以创建 cookie 或保留用户添加的值的方法。下面是我的代码，这里是工作JSfiddle的链接。

    <html>
<head>

<title>Selected Index Design</title>
<script >
var arr1 =  ["",0,6,0,15,4,0,1,0,0,17];    
var arr2 =     ["",0,5,19,3,26,3,25,0,0,24];    
var arr3=       ["",0,15,0,9,0,5,0,0,0,7];

function fill() {
var si = document.getElementById('dd').selectedIndex;

if (si !==0) 
{
var a = arr1[si];
var b= arr2[si];
var c= arr3[si];
var x = document.getElementById("factor").value;
var d= a*x;
var e= b*x;
var f=c*x;
var g = d*4 + e*4 + f*9;
document.getElementById("val1").innerHTML=d;
document.getElementById('val2').innerHTML=e; 
document.getElementById('val3').innerHTML=f;
document.getElementById('val4').innerHTML=g;

}
}
function addoption(){
var mySelect = document.getElementById('dd'),
    newOption = document.createElement('option');

newOption.value = document.getElementById('addopt').value;

if (typeof newOption.innerText === 'undefined')
{
    newOption.textContent = document.getElementById('addopt').value;
}
else
{
    newOption.innerText = document.getElementById('addopt').value;
}
mySelect.appendChild(newOption);
var newone= document.getElementById('addone').value;
var newtwo= document.getElementById('addtwo').value;
var newthree= document.getElementById('addthree').value;
arr1.push(newone);
arr2.push(newtwo);
arr3.push(newthree);
}
</script>




</head>


<body>
<table id="table1">
    <tr>
        <th>dd</th>
        <th>factor</th>
        <th>v1</th>
        <th>v2</th>
        <th>v3</th>
        <th>v4</th>
    </tr>
    <tr class="odd">
        <td>
            <form name = "dd">
            <select name = "dd" id="dd" onchange = "fill()">
                <option >   a </option>
                <option >   b   </option>
                <option >   c   </option>
                <option >   d   </option>
                <option >   e   </option>
                <option >   f   </option>
                <option >   g   </option>
                <option >   h   </option>
                <option >   i   </option>
                <option >   j   </option>
                <option >   k   </option>
            </select>
            </form>
        </td>
        <td id="fac">
        <form name="factor">
            <select id="factor" onChange="fill();">
                <option value=""></option>
                <option value=1>1</option>
                <option value=2>2</option>
                <option value=3>3</option>
                <option value=4>4</option>
                <option value=5>5</option>
                <option value=6>6</option>
                <option value=7>7</option>
                <option value=8>8</option>
                <option value=9>9</option>
            </select>
        </form>
        </td>
        <td id="val1"></td>
        <td id="val2"></td>
        <td id="val3"></td>
        <td id="val4"></td>     
    </tr>
    <tr class="even">
        <td></td>
        <td></td>
        <td ></td>
        <td ></td>
        <td ></td>
        <td ></td>
    </tr>
</table>
<br><br>
<h3>Insert New data</h3>
<b>option<b>
    <input type='text' value='' id='addopt'><br><br>
<b>array one</b>
    <input type='text' value='' id='addone'><br><br>
<b>array 2</b>
    <input type='text' value="" id='addtwo'><br><br>
<b>array 3</b>
    <input type='text' value='' id='addthree'><br><br>
<button id="button" onclick="addoption()">add</button>
<div id='result'></div>

</body>
</html>
4

1 回答 1

1

您可能对HTML5 离线存储之类的东西感兴趣：http : //www.html5rocks.com/en/tutorials/offline/storage/

于 2013-07-30T20:56:03.897 回答