Question

I’m trying to set up a form where users can select from a list of cities instead of typing it in. My problem is the first selection is fine, but, on the second selection, if I:

Clicked the same input – the selection is logged += 1, so on the second time bringing up the ‘Depart’ cities, it logs twice; 3rd time, 3 times, etc.

Clicked the other input – the selection is logged a bunch of times and it enters the data into both inputs.

I’m pretty sure it’s a ‘this’ problem so I’ve logged the problem in the console to see it better. I know I could easily make 2 separate lists and reference each one separately but I figure why repeat the same list twice. I’m also unsure of if the markup is semantically correct (or if it’s semantically correct to only write this list once). Thank you.

http://jsfiddle.net/GDRFt/

Answer 1

Seems a problem with the scope of your $this variable, if you define it like a global variable it should work:

var $this;           
$('.citylist').hide();

$('.depcity, .retcity').on('click', function () {
    $this = $(this);
    $('.citylist').show().on('click', 'li', function () {
        console.log($this);
        $this.val($(this).html());
    });
}).blur( function () {
    $('.citylist').fadeOut();

});

However I must say your approach seems odd to me. I wouldn’t be far better to use two independent select elements? What about if later on project life the city lists diverge?