Problem with dropdown and codeigniter

Question

Hi, i'm using 2 dropdowns where the second gets populated from the first choice.
My problem is that i'm not getting the value from the first dropdown.
What i get is [object Object].
Here's the javascript and php code:
Thanks.

Javascript:

function getState(){
$("#selectestate").bind("change",function(){

    $("#selectcity").load("results/ajaxcity", {stat: $(this).val()} ); //This is where the problem is
    alert({stat: $(this).val()});//Shows [object Object]
});
return false;

}

PHP:

$curstat=$this -> input -> post('state'); //current selected state in first dropdown
<tr>        
    <?php $js = 'id="selectstate" onChange="getState();"';?>
    <td><h3> State: </h3></td>
    <td id="selectestate"><?php echo form_dropdown('state', $stat, $curstat, $js);?></td> 
</tr>    
<tr>    
    <td><h3> City: </h3></td>
    <td id="selectcity"><?php echo form_dropdown('city', $cit);?></td>
</tr>

Answer 1

There is no value for td element, which you are accessing in "#selectestate" selector. Instead of {stat: $(this).val()} you should find inner select element {stat: $(this).find("select").val()}

Answer 2

You're loading the .val() of a <td> element ($(this), inside your handler for a TD). You need to get the id of the <select> tag.

If you really can't find the ID (or codeigniter doesn't set it.. impossible to tell from your example since form_dropdown() is creating it), then instead of $(this).val() you could try $('select',this).val() which will find the value of the first <select> tag within the TD.

Also in your debugging, {stat: $(this).val()} is an object, so of course that's what alert() shows you. Try using firebug, and then change alert() to console.log() -- the firebug console will show you the full object. You could also simply do alert($(this).val()) -- though realize of course that it will be wrong due to the first paragraph above.

Answer 3

You need to alter this code:

$("#selectestate").bind("change",function(){

to this:

$("#selectestate select").bind("change",function(){

You are asking for the value of the <td id="selectstate"> ... which is of course null. #selectstate select loads the actual <select> element that you are looking for, which will then enable you to get its value.

You will also want to change $("#selectcity") to $("#selectcity select") to avoid the same problem in your anonymous function.

Finally, your alert is behaving as expected. {} defines an object in Javascript. So you are alerting an object containing a single attribute. Just alert($(this).val());// Should show the value

If it still fails it's because either:

A) Your URL is wrong
or
B) There is something wrong with the php function called by results/ajaxcity

EDIT:

---

Smacks head: I should have caught this. In your code you have this function:

1.    function getState(){
2.    $("#selectestate select").bind("change",function(){
3.    
4.        $("#selectcity select").load("results/ajaxcity", {stat: $(this).val()} ); 
5.        alert($(this).val());
6.        });
7.    return false;
8.    }

Your generated HTML looks something like this:

<select name="state" id="selectstate" onChange="getState();">

THE PROBLEM: When you use the <select> for the first time your function is called and jQuery binds an anonymous function to the change event for select (line #2) that will be executed every time the change event fires from this select from now on. Every time you select the dropdown a new anonymous function is bound by line #2 and all of the functions that are currently bound to the dropdown are executed. (So if you use the dropdown N times the "change" function will fire N-1 times.)

THE SOLUTION: Use $(document).ready() to bind your function. Your restructured code will look like this:

<script type="text/javascript">
function getState(element){
    $("#selectcity select").load("results/ajaxcity", {stat: $(element).val()} );
    alert($(element).val());
    return false;
}
</script>
//... snip ...
<?php $js = 'id="selectstate"';?>
//... snip ...
<script type="text/javascript">
$(document).ready(function() {
    $("#selectestate select").bind("change", getState);
});
</script>

Answer 4

selectstate select did the trick. It WORKS!!!!! lol

Now i'm having this problem: I click one time and the function doesn't do nothing. I click the second time and i see 2 functions being executed in firebug. I choose another value from the dropdown and i see 3 functions being executed, one more time and it's 4 functions being executed. What's going on? Thanks

function getState(){ $("#selectestate select").bind("change",function(){ $("#selectcity").load("results/ajaxcity", {stat: $(this).val()} ); }); return false; }