How to transpose select list option values using jQuery

Question

I currently have the following select list:

<select name="input_3" id="input_2_3" class="medium gfield_select" tabindex="3">
    <option value=" ">-- Select an Image --</option>
    <option value="mysite.com/wp-content/uploads/2013/11/wedding_3.jpg">wedding 3</option>
    <option value="mysite.com/wp-content/uploads/2013/11/wedding_2.jpg">wedding 2</option>
    <option value="mysite.com/wp-content/uploads/2013/11/wedding_1.jpg">wedding 1</option>
</select>

Using this current select/drop-down list together with jQuery, how can I transpose this select list, within a document.ready function, to instead have everything between the <select>...</select> tags instead, look like:

<select name="input_3" id="input_2_3" class="medium gfield_select" tabindex="3">
    <option value=" ">-- Select an Image --</option>
    <option value="wedding 3" title="mysite.com/wp-content/uploads/2013/11/wedding_3.jpg">wedding 3</option>
    <option value="wedding 2" title="mysite.com/wp-content/uploads/2013/11/wedding_2.jpg">wedding 2</option>
    <option value="wedding 1" title="mysite.com/wp-content/uploads/2013/11/wedding_1.jpg">wedding 1</option>
</select>

Basically, what use to be value="mysite.com/..." should now be title="mysite.com/..." and value should now equal the option label, such as "wedding 3".

Note: I want to ignore the first <option> where the value= " " as I need this to stay the same.

Answer 1

Here is a basic solution that relies on the form of attr() that takes a function:

$(".gfield_select > option:gt(0)").attr("title", function() {
    return this.value;
}).attr("value", function() {
    return $(this).text();
});

Answer 2

Your examples are confusing me a little, but if I am reading correctly, you need to use jQuery's .attr() function, which allows you to alter attributes such as title, and the .val() function, which lets you change the elements value.

For example:

$("option").attr("title","url").val("url");

See the jQuery documentation of .attr() (http://api.jquery.com/attr/) and .val() (http://api.jquery.com/val/).

Update

If I understand you correctly, you first want to give the title attribute the value of... value, and then make value equal the text of that option.

$("option").each(function()
{
    $(this).attr("title", this.value).val($(this).text());
});