javascript - 下拉菜单和 codeigniter 的问题

Question

我正在使用 2 个下拉菜单，其中第二个下拉菜单是从第一个选项中填充的。
我的问题是我没有从第一个下拉列表中获取值。
我得到的是 [object Object]。
这是 javascript 和 php 代码:
谢谢。

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

您需要更改此代码:

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

为此:

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

您要求的是 <td id="selectstate"> 的值...当然是null . #selectstate select加载实际的 <select>您正在寻找的元素，这将使您能够获得它的值(value)。

您还需要更改 $("#selectcity")至 $("#selectcity select")避免在匿名函数中出现同样的问题。

最后，您的警报按预期运行。 {}在 Javascript 中定义一个对象。因此，您正在警告包含单个属性的对象。就alert($(this).val());// Should show the value

如果仍然失败，那是因为:

A) 你的网址有误
或者
B) results/ajaxcity 调用的 php 函数有问题

编辑:

---

拍打脑袋:我应该捕获这个。在你的代码中你有这个功能:

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.    }

您生成的 HTML 看起来像这样:

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

问题:当您使用 <select>第一次调用您的函数时，jQuery 将一个匿名函数绑定(bind)到 select 的更改事件(第 2 行)，每次从 从现在开始 从此选择触发更改事件时，该函数都会执行。每次您选择下拉菜单时，第 2 行都会绑定(bind)一个新的匿名函数，并且执行当前绑定(bind)到下拉菜单的所有函数。 (因此，如果您使用下拉菜单 N 次，“更改”功能将触发 N-1 次。)

解决方案:使用 $(document).ready() 至 bind你的功能。您的重组代码将如下所示:

<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>