BaronGrivet BaronGrivet - 11 months ago 40
jQuery Question

How to make changes to <select> dropdown by jQuery register in the HTML

I'm working on a project with a large dynamic form. The form can be manipulated by jQuery and saved as HTML (to be outputted to a PDF).

When changes are made to

dropdowns the change isn't reflected in the HTML, so when the form is saved the wrong option is displayed.

Code Example:

<p>Original Form</p>
<form id="form">
<select id="select">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="carrot">Carrot</option>
<p>Form Saved then Loaded via jQuery</p>
<div id="output"></div>


var formHTML = $('#form').html();


enter image description here

Is this expected behaviour? What is the best alternative for setting the value of a
dropdown in jQuery so it also shows in the HTML?

Answer Source

You need to manually set selected attribute. It will not be reflected in the html when you change the selected property in the dom

Can do something like:


Note that you will have the same issue with any <input> whereby the attribute value will not reflect user changes. There is a difference between attribute value and value property

For text inputs you could do something like:

   return this.value;

For checked radios and checkbox you need to set checked attribute something like:


In other words, to answer your question, the behavior you are seeing is as expected