javascript - 如何将选择元素设置为只读 ('disabled' 不会在服务器上传递选择值)

Question

当我使用以下任何代码时，select 元素看起来确实被禁用，但选择并未在服务器上传递:我认为 readonly 是使用过，但我不知道或者是否可以解决问题。非常感谢任何帮助。

$('#selectID').prop('disabled',true);

$('#selectID').prop('disabled','disabled');

$('#selectID').attr('disabled',true);

$('#selectID').attr('disabled','disabled');

Answer 1

参见this answer -HTML form readonly SELECT tag/input

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

If you reenable your SELECT, you should copy it's value to the hidden input in an onchange event.

参见this fiddle演示如何将禁用选择中的选定值提取到将在表单中提交的隐藏字段中。

$(function() {
  var select_val = $('#sel_test option:selected').val();
  $('#hdn_test').val(select_val);
  $('#output').text('Selected value is: ' + select_val);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select disabled="disabled" id="sel_test">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<input type="hidden" id="hdn_test" />
<div id="output"></div>

希望有帮助。