将下拉列表值重置为以前的值

Question

我正在使用javascript来验证一些下拉列表选择。一种选择是建筑物框架的长度。另外3个下拉用于可以添加到侧面的车库门。如果门的总宽度超过了框架长度，我有代码提醒我。如果金额超过我在if语句中的条件，我需要if条件获取最后选择的门下拉列表的先前值并将其重置为之前的金额。

这是我的HTML

Frame Length:
<select id="framewidth" onchange="doorsrightsideFunction()">
    <option value="20">21</option>
    <option value="25">26</option>
    <option value="30">31</option>
    <option value="35">36</option>
    <option value="40">41</option>
</select>
<br>
<input type="hidden" name="eight_by_seven_width_right_side" 
       id="eight_by_seven_width_right_side" value="8">
<br>
<input type="hidden" name="eight_by_seven_height_right_side" 
       id="eight_by_seven_height_right_side" value="7">
<br>8x7:
<select id="eight_by_seven_right_side" onchange="doorsrightsideFunction()">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<br>
<input type="hidden" name="nine_by_seven_width_right_side" 
       id="nine_by_seven_width_right_side" value="9">
<br>
<input type="hidden" name="nine_by_seven_height_right_side" 
       id="nine_by_seven_height_right_side" value="7">
<br>9x7:
<select id="nine_by_seven_right_side" onchange="doorsrightsideFunction()">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<br>
<input type="hidden" name="ten_by_eight_width_right_side" 
       id="ten_by_eight_width_right_side" value="10">
<br>
<input type="hidden" name="ten_by_eight_height_right_side" 
       id="ten_by_eight_height_right_side" value="8">
<br>10x8:
<select id="ten_by_eight_right_side" onchange="doorsrightsideFunction()">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

这是我到目前为止的javascript

function doorsrightsideFunction() {

    function getValue(idElement) {
        return document.getElementById(idElement).value;
    }    
    var eightwidth = getValue("eight_by_seven_width_right_side");
    var ninewidth = getValue("nine_by_seven_width_right_side");
    var tenwidth = getValue("ten_by_eight_width_right_side");
    var eightwidthamount = getValue("eight_by_seven_right_side");
    var ninewidthamount = getValue("nine_by_seven_right_side");
    var tenwidthamount = getValue("ten_by_eight_right_side");
    var framewidth = getValue("framewidth");
    var totaldoorwidth;
    var totaldooramount;
    var framewidthtotaldoorwidth;
    var framespace;

    totaldoorwidth = eightwidth * eightwidthamount
                   + ninewidth * ninewidthamount
                   + tenwidth * tenwidthamount;

    totaldooramount = parseInt(eightwidthamount, 10)
                    + parseInt(ninewidthamount, 10)
                    + parseInt(tenwidthamount, 10);

    framewidthtotaldoorwidth = framewidth - totaldoorwidth;

    framespace = totaldooramount + 1;

    if (framewidthtotaldoorwidth < framespace) {
        alert("You have to many doors on the right side");
    } else { }
}

这是我的小提琴http://jsfiddle.net/steven27030/M52Hf/

的链接

Answer 1

http://jsfiddle.net/M52Hf/84/

你可以使用data属性，并确保将当前元素作为一个参数传递到你的doorsrightside函数调用：

<select id="framewidth" onchange="doorsrightsideFunction(this)">

 var previousValue = currentelement.getAttribute("data-prev");
    if(previousValue == null)
        previousValue = currentelement[0].value;

Answer 2

您需要存储以前的值，以便在必要时切换回来，并在成功更改后更新之前的值。我会在不同的地方使用数组。

var prevValue = Array();
function doorsrightsideFunction() {
    function getValue(idElement) {
        return document.getElementById(idElement).value;
    }
    function setValue(idElement,val) {
        return document.getElementById(idElement).value = val;
    }

    var ids = Array("eight_by_seven_right_side","nine_by_seven_right_side","ten_by_eight_right_side");
    var widths = Array(
        getValue("eight_by_seven_width_right_side"),
        getValue("nine_by_seven_width_right_side"),
        getValue("ten_by_eight_width_right_side")
    );
    var values = Array();
    for(i=0;i<ids.length;i++) {
        if (!prevValue[i]) { prevValue[i]=0; }
        values[i] = getValue(ids[i]);
    }    
    var framewidth = getValue("framewidth");
    var totaldoorwidth = 0;
    var totaldooramount = 0;
    var framewidthtotaldoorwidth;
    var framespace;

    for(i=0;i<ids.length;i++) {
        totaldoorwidth += values[i] * widths[i];
        totaldooramount += parseInt(values[i], 10);
    }

    framewidthtotaldoorwidth = framewidth - totaldoorwidth;

    framespace = totaldooramount + 1;

    if (framewidthtotaldoorwidth < framespace) {
        alert("You have to many doors on the right side");
        for(i=0;i<ids.length;i++) { setValue(ids[i],prevValue[i]); }
    } else {
        prevValue = values;
    }
}

updated fiddle

<小时/> 编辑：在评论中回答您的后续问题：

  

有没有办法让它循环并找到下一个尺寸，如果他们选择了很多呢？

<小时/> 是的，只要初始值有效（在这种情况下，没有门是完美的初始值），您可以让它迭代值以找到适合的值。这也意味着您不必担心存储任何先前的值。

我对此有了一些乐趣，对你的代码采取了一些自由。

首先，HTMl中的一些变化：

对于带有onChange的每个元素，

• 让它传递已更改的元素，以便我们知道要修改哪个元素：
  <select ... onchange="doorsrightsideFunction(this)">

• 更改_width和_height隐藏输入的ID，使其格式为<id of select element>_width（即id="eight_by_seven_right_side"选择的宽度元素应为是"eight_by_seven_right_side_width"所以您只需要id + "_width"找到它）

• 将所有门选择元素包装在<div id="doorchoices"> ... </div>中，以便以编程方式找到它们。这样就可以在系统中添加一个新的门，就像在包含div中添加select和height / width隐藏输入一样简单，javascript会自动查找并使用它们。

javascript发生了变化，我试图内联评论：

//make ids and widths global to this page so we only have to construct it on page load
var ids;
var widths;

function getValue(idElement) {
    var el = document.getElementById(idElement);
    if (el) {
        return parseInt(el.value);
    } else {
        return null;
    }
}

function setValue(idElement, val) {
    return document.getElementById(idElement).value = val;
}

window.onload = function () {
    //construct id list from elements within the containing div when the page loads
    ids = Array("framewidth");
    widths = Array(null);
    var container = document.getElementById("doorchoices");
    var selections = container.getElementsByTagName("select");
    var i;
    for (i = 0; i < selections.length; i++) {
        ids.push(selections[i].id);
        // get each door's width from the _width element that matches the id
        widths.push(getValue(selections[i].id + "_width"));
    }
}

// el is the 'this' passed from the select that changed
function doorsrightsideFunction(el) {

    console.log(widths);
    console.log(ids);

    var changedIndex = ids.indexOf(el.id);
    //get all of the option elements of the changed select
    var possibleValueEls = el.getElementsByTagName("option");
    var values = Array();
    var possibleValues = Array();
    var framewidth;
    var curValue;
    var totaldoorwidth;
    var totaldooramount;
    var framewidthtotaldoorwidth;
    var framespace;
    var i;


    function calcWidth() {
        totaldoorwidth = 0;
        totaldooramount = 0;
        var i;
        framewidth = values[0];
        //start with 1 since index 0 is the frame width
        for (i = 1; i < ids.length; i++) {
            console.log(i + ")" + ids[i] + " " + values[i] + "(" + widths[i] + ")");
            totaldoorwidth += values[i] * widths[i];
            totaldooramount += parseInt(values[i], 10);
        }
        framewidthtotaldoorwidth = framewidth - totaldoorwidth;
        framespace = totaldooramount + 1;
    }

    // get all possible values from the option elements for the select that was changed    
    for (i = 0; i < possibleValueEls.length; i++) {
        possibleValues.push(parseInt(possibleValueEls[i].value));
    }
    // values should be increasing in order
    possibleValues.sort();
    // except framewidth should be decreasing
    if (el.id == "framewidth") {
        possibleValues = possibleValues.reverse()
    };

    // get the value of each element
    for (i = 0; i < ids.length; i++) {
        values[i] = getValue(ids[i]);
        if (changedIndex == i) {
            curValue = values[i]
        };
    }

    calcWidth();
    console.log(framewidthtotaldoorwidth);
    console.log(framespace);
    if (framewidthtotaldoorwidth < framespace) {
        alert("You have to many doors on the right side");
        // start with the current value and try each until it fits
        for (validx = possibleValues.indexOf(curValue); validx >= 0, framewidthtotaldoorwidth < framespace; validx--) {
            //change the value in the values array
            values[changedIndex] = possibleValues[validx];
            //change the select to match
            setValue(el.id, possibleValues[validx]);
            //see if it fits
            calcWidth();
        }
    }
}

New fiddle

以及添加其他门尺寸的简单性 - 只需将其添加到HTML：

    <input type="hidden" name="twelve_by_ten_right_side_width" id="twelve_by_ten_right_side_width" value="12" />
    <input type="hidden" name="twelve_by_ten_right_side_height" id="twelve_by_ten_right_side_height" value="10" />
    <br />
    <label for="twelve_by_ten_right_side">12x10:</label>
    <select id="twelve_by_ten_right_side" onchange="doorsrightsideFunction(this)">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>

New door fiddle