Question

如何创建一个html下拉列表，一旦某人选择了option disabled，就会刷新回option value标记，查看了他们的选择并决定返回另一个option value 1}}选择。

HTML：

<form>
<select name="URL" onchange="window.location.href=this.form.URL.options[this.form.URL.selectedIndex].value">
<option disabled="disabled" selected="selected">Choose a County for Recycling Information.......</option>
<option value="LINK">Ingham County (Google Map / PDF)</option>
<option value="LINK">Clinton County (PDF)</option>
<option value="LINK">Eaton County (PDF)</option>
</select>
</form>

-select name-tag将用户呈现为在同一窗口中打开的URL。

<select name="URL" onchange="window.location.href=this.form.URL.options[this.form.URL.selectedIndex].value">

目前看，如果某人从列表中进行选择，查看他们的选择（在同一窗口中打开）并返回（到原始网页），下拉菜单不会恢复为：

<option disabled="disabled" selected="selected">Choose a County for Recycling Information.......</option>

但仍保留在option value代码选择中，除非他们刷新/重新加载浏览器窗口。

Answer 1

基本上，如果没有javascript，你就无法做到。

我不知道你知道多少，所以我假设你没有javascript的先验知识。

以下内容应该按照您的要求进行。

如您所见，我已更改onchange属性以调用名为“ResetToDisabled”的javascript函数，该函数使用“this”关键字将DropDown列表作为参数传递。

<select name="URL" onchange="ResetToDisabled(this);">
    <option disabled="disabled" selected="selected">Choose a County for Recycling Information.......</option>
    <option value="LINK">Ingham County (Google Map / PDF)</option>
    <option value="LINK">Clinton County (PDF)</option>
    <option value="LINK">Eaton County (PDF)</option>
</select>
<script type="text/javascript">
    function ResetToDisabled(DropDown) {
        var TargetIndex = DropDown.selectedIndex;
        DropDown.selectedIndex = 0;
        window.location.href = DropDown.options[TargetIndex].value;
    }
</script>

这里发生的事情是，我正在创建一个名为“ResetToDisabled”的javascript函数，它接受一个对象（在本例中我们可以假设它将是一个下拉列表）作为参数。

此函数创建一个名为“TargetIndex”的临时变量，并将其值设置为下拉列表的选定索引。

然后它将下拉列表的选定索引设置为0（第一个选项）。

然后它将执行您的代码行，您可以在其中打开新的网页。但是，由于您已将下拉菜单重置为第一个选项，因此当您单击后退时，它会记住该选项已被选中。

我也觉得我应该补充一下。看起来你正试图实现许多网站用于菜单的相同行为;如果是这种情况，您可能需要搜索“CSS下拉菜单”，因为如果您稍后尝试更改选择下拉列表，则很难更改。

Answer 2

你不需要使用jquery！

html文件;

<form>
<select name="URL" onchange="changeme(this)">
<option disabled="disabled" selected="selected">Choose a County for Recycling Information.......</option>
<option value="LINK">Ingham County (Google Map / PDF)</option>
<option value="LINK">Clinton County (PDF)</option>
<option value="LINK">Eaton County (PDF)</option>
</select>
</form>

js file;

function changeme(mselect ) {
    for (var i = 0; i < mselect.options.length; i++) {
        if (mselect.options[i].selected == true) {
            mselect.options[i].setAttribute('disabled', 'disabled');
        }
        else {
            mselect.options[i].removeAttribute('disabled');
        }
    }
}

Answer 3

根据它们导航回页面的方式，您应该能够在页面加载时设置selected index的一些Javascript。

YourHTMLElement.selectedIndex = 0;

但是我会注意到，因为它仍然选择相同的值，所以听起来好像您正在使用history.back();导航，这可能无法执行通常的onload事件。

但我确实找到了答案here对此类问题有帮助。这将允许jQuery的文档就绪事件触发，这意味着您可以将其链接起来以将selectedIndex重置为0.

HTML下拉列表

3 个答案: