Question

I have a select element from which the users can select a value and copy it to a textarea element. Everything works as expected with the exception that the value from the select element is copied twice.

$('#cp_objs_for_goal_button').mouseup(function(){
    if ($("#cp_objs_for_goal_select").attr("selectedIndex") != 0)
    {
        console.log('selected index: '+$("#cp_objs_for_goal_select").attr("selectedIndex"));
        curr_txt = $('#pop_goal_text').val();
        console.log('curr_txt: '+curr_txt);
        added_txt = $('#cp_objs_for_goal_select option:selected').text();
        console.log('added_txt: '+added_txt);
        if (curr_txt)
        {
            new_pop_text = curr_txt + ' ' + added_txt;
        }
        else
        {
            new_pop_text = added_txt;
        }
        console.log('new_pop_text: '+new_pop_text);
        $('#pop_goal_text').val(new_pop_text);

        // TODO - This throws error:
        // $('#cp_objs_for_goal_select option').get(0).attr('selected', 'selected');
    }
})

When I click the cp_objs_for_goal_button button, I get this…. from the console log:

selected index: 1
curr_txt:
added_txt: Restore geomorphic integrity
new_pop_text: Restore geomorphic integrity

selected index: 1
curr_txt: Restore geomorphic integrity
added_txt: Restore geomorphic integrity
new_pop_text: Restore geomorphic integrity Restore geomorphic integrity

Here the html:

<select id="cp_objs_for_goal_select" style="width:100%"> 
    <option>Select the Objective you would like to copy to this project:</option> 
    <option>Restore geomorphic integrity</option> 
</select> 
<div id="cp_objs_for_goal_button" class="awesome" style="border:0;">Copy</div>

Answer 1

I’ve confirmed too, in isolation, the script works as intended. However, the page has tons of moving parts and I couldn’t isolate the problem. So, I removed the jquery even listener and added an on onclick to the button that calls the method. This works fine.

Thanks for all input.