Jquery изменить значение ввода для отправки формы

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>.Просмотрите демонстрацию:

1. Выберите <option> из <select> ...

2. ... обратите внимание на значение <input>установлено значение <select>.

3. Затем нажмите кнопку Submit ...

4. ...обратите внимание на ответ сервера, напечатанный в <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>