title: jQuery function to change value of "value" attribute on html element
body: <p>Is there a way to use something like <code>$(".class").change(function(){</code> or <code>$("#id").change(function(){</code>, but to change the value the value attribute of an option element like so?</p>
  
  <pre><code>&lt;select&gt;
      &lt;option value="changeThis"&gt;opt&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>I'm using a for loop to generate each option of a select list from a relational database, so I need to have a function to automatically increment the value so they're unique.</p>
  
  <hr>
  
  <p><strong>New code:</strong></p>
  
  <pre><code>&lt;div class="facilitySelection"&gt;
      &lt;select name="Facility" class="form-control"&gt;
          &lt;option selected disabled&gt;Select a facility...&lt;/option&gt;
          @{
              var i = 1;
  
              foreach (var item in Model)
              {
              &lt;option value="@i"&gt;@Html.DisplayFor(modelItem =&gt; item.FacilityName&lt;/option&gt;
              i++;
              }
          }
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>Newer code:</strong></p>
  
  <p>I have a table of Facilities, with an ID and Name field. Now using a <code>foreach</code> loop to use the ID directly from the database rather than generating the number from a variable in the script block, to ensure the ID and Name from the database line up correctly.</p>
  
  <pre><code>&lt;div class="facilitySelection"&gt;
      &lt;select id="Facility" name="Facility" class="form-control"&gt;
          &lt;option selected disabled&gt;Select a facility...&lt;/option&gt;
          @{  
              foreach(var f in ViewBag.Facilities)
              {
                  &lt;option value="@f.Id"&gt;@f.Name&lt;/option&gt;
              }
          }
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>