HTML form readonly SELECT tag/input

题意：

HTML表单只读SELECT标签/输入框

问题背景：

According to HTML specs, the select tag in HTML doesn't have a readonly attribute, only a disabled attribute. So if you want to keep the user from changing the dropdown, you have to use disabled.

根据HTML规范，HTML中的select标签没有readonly属性，只有disabled属性。所以，如果你想防止用户更改下拉菜单，必须使用disabled。

The only problem is that disabled HTML form inputs don't get included in the POST / GET data.

唯一的问题是，禁用的HTML表单输入不会包含在POST/GET数据中。

What's the best way to emulate the readonly attribute for a select tag, and still get the POST data?

模拟select标签的readonly属性并仍然获取POST数据的最佳方法是什么？

问题解决：

You should keep the select element disabled but also add another hidden input with the same name and value.

你应该保持select元素为禁用状态，但同时添加另一个具有相同名称和值的隐藏输入框。

If you reenable your SELECT, you should copy its value to the hidden input in an onchange event and disable (or remove) the hidden input.

如果你重新启用SELECT，应该在onchange事件中将其值复制到隐藏输入框，并禁用（或移除）隐藏输入框。

Here is a demo:

这是示例：

$('#mainform').submit(function() {
    $('#formdata_container').show();
    $('#formdata').html($(this).serialize());
    return false;
});

$('#enableselect').click(function() {
    $('#mainform input[name=animal]')
        .attr("disabled", true);
    
    $('#animal-select')
        .attr('disabled', false)
    	.attr('name', 'animal');
    
    $('#enableselect').hide();
    return false;
});

#formdata_container {
    padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <form id="mainform">
        <select id="animal-select" disabled="true">
            <option value="cat" selected>Cat</option>
            <option value="dog">Dog</option>
            <option value="hamster">Hamster</option>
        </select>
        <input type="hidden" name="animal" value="cat"/>
        <button id="enableselect">Enable</button>
        
        <select name="color">
            <option value="blue" selected>Blue</option>
            <option value="green">Green</option>
            <option value="red">Red</option>
        </select>

        <input type="submit"/>
    </form>
</div>

<div id="formdata_container" style="display:none">
    <div>Submitted data:</div>
    <div id="formdata">
    </div>
</div>