Question

我制作了2个<select>标签。第二个中显示的值取决于第一个中选择的值。现在我需要帮助做两件事：

每次单击重置按钮时，将两个选择标记重置为空。在form提交后单击重置按钮时，也会清空它们（在第一次加载页面时恢复为状态）。
在表单提交后，继续在用户选择的第二个选择标记中显示值。

HTML：

<form id="form" method="post">
    <select id="vehicle" name="vehicle" onchange="select(this.value)">
    <option disabled <?php if(isset($vehicle['type']) && $vehicle['type'] == "") echo 'selected'; ?>>Choose option</option>
    <option value="cars" <?php if(isset($vehicle['type']) && $vehicle['type'] == "cars") echo 'selected'; ?>>Cars</option>
    <option value="trains" <?php if(isset($vehicle['type']) && $vehicle['type'] == "trains") echo 'selected'; ?>>Trains</option>
    </select>
    <select id="brand" name="brand">
    <option data-option="cars">BMW</option>
    <option data-option="cars">Tesla</option>
    <option data-option="trains">Rajdhani Express</option>
    <option data-option="trains">The Flying Scotsman</option>
    </select>
    <input type="reset" name="reset" value="Reset">
    <input type="submit" name="submit" value="Submit">
</form>

使用Javascript：

var vehicle = document.getElementById("vehicle");
var brand = document.getElementById("brand");
var brandOpt = brand.querySelectorAll("option");
function select(val)
{
    brand.innerHTML = '';
    for(var i = 0 ; i < brandOpt.length ; i++)
    {
        if(brandOpt[i].dataset.option === val)
        { brand.appendChild(brandOpt[i]); }
    }
    brand.selectedIndex = "0";
}
select(vehicle.value);

PHP：

$vehicle = array('type' => "", 'brand' => "");
if(isset($_POST['submit']))
{
    if(isset($_POST['vehicle']) && isset($_POST['brand']))
    {
        $vehicle = array('type' => $_POST['vehicle'], 'brand' => $_POST['brand']);
    }
}

上面的代码正在做我想做的事情，但不是一切。像：

在提交之前重置第一个选择标记的值，但在提交之后不重置。
第二个选择标记的值不会在提交之前或之后重置。我希望每次单击重置按钮时重置它。
单击提交按钮时，第二个选择标记的值跳转到第一个值选项。我不想要那个。

谢谢！

Answer 1

以程序方式选择一个选项的Javascript应如下所示。

＆＃13;

brand.value = valueToSelect; // select a value
brand.value = ''; // remove selection

＆＃13;

如果您使用表单提交的整页刷新，则需要以某种方式存储值（cookie，localstorage，url querystring，url hash）并在页面重新加载后收集它。对于这个$ _COOKIE和if条件设置你的phtml可能比整页刷新场景中的javascript更清晰。

提交后，继续根据另一个选择标记显示选择标记值。使用重置按钮时，也将其重置为空

1 个答案: