编辑

Question

我创建了一个表单字段，该表单字段从下拉选项中接收值。

在前端，选择下拉选项时，将显示正确的数据；但是，当您查看检查器时，该值仍然为空，并且在提交表单时，不会捕获任何数据。

这是代码：

$(window).load(function()  {
  $("#position").appendTo(".form-columns-1");
  $("#position").change(function(){
    var positionValue = $("option:selected").val();
    $('input[name=bdm_position]').val(positionValue); 

  }); 
});

我在这里想念什么？

Answer 1

编辑

“ ...它在前端起作用，但是当您提交表单时，该值不会传递。”

现在添加了一个<form>，它将提交给实时测试服务器，其响应将重定向到位于<iframe>下的<form>。查看演示：

从<option> ...中选择一个<select>
...请注意，将<input>值设置为<select>值。
然后单击提交按钮...
...请注意下面<iframe>中打印的服务器响应：

   {
      "args": {}, 
      "data": "", 
       "files": {}, 
       "form": {
         "bdm_position": "B"
     }, 
     "headers": {...

如果您选择“ B”，则可以预期得到此结果

我猜没有发现$('#position')的存在。问题是<select>s值直接访问标签本身：

$('select').val()

演示

var pos = $(`<select id='position'>
  <option val='A'>A</option>
  <option val='B'>B</option>
  <option val='C'>C</option>
  <option val='D'>D</option>
</select>`);



pos.appendTo(".form-columns-1");

pos.on('change', function() {

  $('input[name=bdm_position]').val($(this).val());

});

<form id='ui' action='https://httpbin.org/post' method='post' target='view'>
  <fieldset class='form-columns-1'>

  </fieldset>

  <input name='bdm_position'><input type='submit'>
</form>
<iframe name='view'></iframe>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

jQuery更改表单提交的输入值

1 个答案:

编辑

演示