下拉式触发器更改事件

我有3个下拉式框。国家，州，市。当用户选择Country时，它将从数据库中获取状态详细信息并将它们添加到状态下拉框中。同样适用于城市。下拉式触发器更改事件

这是我正在使用的代码。

<div> 
<label>Country :</label> 
<select name="country" id="country" class="country"> 
<option selected="selected">--Select Country--</option> 
<?php 
$stmt = $DB_con->prepare("SELECT * FROM tbl_country"); 
$stmt->execute(); 
while($row=$stmt->fetch(PDO::FETCH_ASSOC)) 
{ 
    ?> 
     <option value="<?php echo $row['country_id']; ?>"><?php echo $row['country_name']; ?></option> 
     <?php 
} 
?> 
</select> 

<label>State :</label> <select name="state" id="state" class="state"> 
<option selected="selected">--Select State--</option> 
</select> 


<label>City :</label> <select name="city" id="city" class="city"> 
<option selected="selected">--Select City--</option> 
</select> 

</div>

这是JS部分。

<script type="text/javascript"> 
$(document).ready(function() 
{ 
$(".country").change(function() 
{ 
    var id=$(this).val(); 
    var dataString = 'id='+ id; 

    $.ajax 
    ({ 
    type: "POST", 
    url: "get_state.php", 
    data: dataString, 
    cache: false, 
    success: function(html) 
    { 
     $(".state").html(html); 
    } 
    }); 
    }); 


$(".state").change(function() 
{ 
    var id=$(this).val(); 
    var dataString = 'id='+ id; 

    $.ajax 
    ({ 
    type: "POST", 
    url: "get_city.php", 
    data: dataString, 
    cache: false, 
    success: function(html) 
    { 
    $(".city").html(html); 
    } 
    }); 
    }); 

}); 
</script>

它工作正常，没有错误/问题。

我有另一个php文件，我使用相同的代码。在那个文件中，我以json格式从数据库获取数据，并且我想在下拉框中显示它们。我检查了萤火虫，发现数据来自数据库。

这是代码。

for (i = 0; i < data.country.length; i++) { 
            j=i+1; 
            $('#country'+j).val(data.country[i].id).change(); 

           } 
           for (i = 0; i < data.state.length; i++) { 
            j=i+1; 
            $('#state'+j).val(data.state[i].id).change(); 

           } 
           for (i = 0; i < data.city.length; i++) { 
            j=i+1; 
            $('#city'+j).val(data.city[i].id); 

           }

问题是国家显示正常，但状态和城市框显示选择状态和选择城市。似乎数据没有显示在选择框中。

我知道我的问题相当大，但我认为如果我解释一切，这将是一件好事。

让我知道是否需要更多细节。

谢谢。

编辑：

的样本数据

EDIT2

，如果我在状态添加报警这样的。

for (i = 0; i < data.state.length; i++) { 
    j=i+1; 
     alert(data.state[i].id); 
        $('#state'+j).val(data.state[i].id).change(); 
    }

然后我得到状态框中的数据。有点奇怪。

来源

2016-06-21 Ironic

你能'的console.log（data.state [i] .id）;'在循环中，让我们知道你看到了什么？与城市部分相同。 – Sina

@Sina它显示id.1639。 – Ironic

太好了，你成功的回拨（州和城市）怎么样？ '的console.log（HTML）';请在您成功后立即通知我们。 – Sina

如果你的状态来作为JSON对象，你必须做这样的事情：

$(".country").change(function() 
{ 
    var id=$(this).val(); 
    var dataString = 'id='+ id; 

    $.ajax 
    ({ 
    type: "POST", 
    url: "get_state.php", 
    data: dataString, 
    cache: false, 
    success: function(data) 
    { 
     $(".state option").remove(); 
     $(".state").append('<option value="">--Select State--</option>'); 
     for (var i=0; i < data.state.length; i++) { 
      $(".state").append('<option value="' + data.state[i].id + '">' + data.state[i].text + '</option>'); 
     } 

     // if you know what state needs to be selected then you can implement that next 
     // $(".state").val(theTextOfTheState); 
    } 
    }); 
    });

同样的事情的城市：

$(".state").change(function() 
{ 
    var id=$(this).val(); 
    var dataString = 'id='+ id; 

    $.ajax 
    ({ 
    type: "POST", 
    url: "get_city.php", 
    data: dataString, 
    cache: false, 
    success: function(data) 
    { 
     $(".city option").remove(); 
     $(".city").append('<option value="">--Select City--</option>'); 
     for (var i=0; i < data.city.length; i++) { 
      $(".city").append('<option value="' + data.city[i].id + '">' + data.city[i].text + '</option>'); 
     } 

     // if you know what city needs to be selected then you can implement that next 
     // $(".city").val(theTextOfTheCity); 
    } 
    }); 
    });

来源

2016-06-21 19:04:59 fictus

感谢您的回答。我会尽力让你知道。投了票。 – Ironic

下拉式触发器更改事件

回答

相关问题