Question

我有一个对用户禁用的下拉菜单。我希望用户能够按下将所选项目更改为其他项目的按钮。例如：从下拉菜单的第四项到第七项。

我尝试禁用该下拉列表，但是当我这样做并提交表单时，出现PHP错误，提示Undefined index: id。

HTML：

<form>
    <select id='id' name='id' autocomplete='none' disabled required>
        <option value='2'>apple</option>
        <option value='6'>banana</option>
        <option value='10'>orange</option>
    </select>
    <button type='submit'>Submit</button>
</form>

JavaScript：

const dropdown = document.getElementById('dropdown');
const options = dropdown.options;

for (let i = 0; i < options.length; ++i) {
    if (options[i].value === id) {
        dropdown.selectedIndex = i;
        break;
    }
}

PHP（这一行似乎很破）：

$id = $_POST['id'];

Answer 1

似乎您尚未在表单标签中定义方法和操作。我认为默认情况下，该方法设置为“ GET”，因此在检查“ POST”时会遇到错误。因此，设置“ method ='post'”（最好还有一个动作，例如“ action ='/ yourPageName.php'）”，看看是否有帮助。

Answer 2

我想出了一个适合我需要的解决方案。这很简单。提交表单时，我只是启用了下拉菜单，然后立即再次将其禁用。

id.removeAttribute('disabled');
const data = new FormData(document.getElementById('form'));
id.setAttribute('disabled', '');
request.send(data);

不过感谢您的帮助：）

Answer 3

提交表单时，将禁用输入字段。如果您希望用户查看下拉列表而不选择它，我建议创建一个名称为“ id”的隐藏输入字段。

<form>
    <select id='id' autocomplete='none' disabled required>
        <option value='2'>apple</option>
        <option value='6'>banana</option>
        <option value='10'>orange</option>
    </select>
    <input type="hidden" name='id' value="6" /> 
    <button type='submit'>Submit</button>
</form>

Answer 4

您可以使用id =“ id”进行隐藏输入，并将选择ID更改为“ temp_id”。然后，由于您是通过javascript发出请求，因此可以在发出请求之前更新隐藏字段。

<select id='temp_id' autocomplete='none' disabled required>
<option value='2'>apple</option>
<option value='6'>banana</option>
<option value='10>orange</option>
</select>
<input type="hidden" name="id" id="id" value="">

然后在发出请求之前，在您的javascript上运行代码：

document.getElementById("id").value = document.getElementById("temp_id").value;

有没有一种方法可以禁用用户下拉菜单，同时仍然可以使用禁用的下拉菜单提交表单？

4 个答案: