生成选择列表项问题

Question

使用 JQuery 生成动态选择列表项菜单

这是分区：

<select name="CountryID" id="CountryID">
<option value="" id="">Select the Country</option>
......
</option>
</select>
<div id='result' name="result">
<select  id="name">
<option value="" disabled>Please select above</option>
</select>
</div>
<div id='resulta' name="resulta">
<select  id="name">
<option value="" disabled>Please select above</option>
</select>
</div>

这是我的脚本：

<script>
var ab=$.noConflict();
ab(document).ready(function(){
ab("#CountryID").change(function(){
    var CountryID=ab("#CountryID").val();
    ab.post("globalregiongenerator",
    {
      CountryID:CountryID
    },
    function(data,status){
       ab( "#result" ).html( data );
    });
  });
});
</script>


<script>
var ac=$.noConflict();
ac(document).ready(function(){
  ac("#RegionName").change(function(){
  //alert('action triggered');
    var RegionName=ab("#RegionName").val();
    ac.post("globalcitygenerator",
    {
      RegionName:RegionName
    },
    function(data,status){
       ac( "#resulta" ).html( data );
    });
  });
});
</script>

在这里我生成我的选择菜单列表

public function globalregiongenerator()
    {
    $CountryID = Input::get('CountryID');
    $roles = DB::table('region')->where('CountryID', $CountryID)->lists('regionname','regionid');   
    echo "<select  id='RegionName' name='RegionName'>"; 
    foreach ($roles as $value) 
    {
    echo "<option value=".$value.">".$value."</option>";
    }
    }

public function globalcitygenerator()
    {
    $RegionName = Input::get('RegionName');
    $roles = DB::table('city')->where('RegionName', $RegionName)->lists('regionname','regionid');   
    echo "<select  id='CityName' name='CityName'>"; 
    foreach ($roles as $value) 
    {
    echo "<option value=".$value.">".$value."</option>";
    }
    }

我可以生成第一个选择菜单列表项，但操作ac("#RegionName").change(function(){ 没有触发，即使我尝试在其中放置警报。

第二个列表菜单项<select id='RegionName' name='RegionName'> 没有在页面中创建还是什么。

我该怎么做？

注意：

我什至在ab( "#result" ).html(data); from this answer 下尝试了ab('#RegionName').selectmenu('refresh', true);，但没有成功

更新：

如果我们附加$( "#result" ).append ( data ); 会出现另一个菜单，这不是我需要的。 我需要前三个菜单。

Answer 1

看起来你没有关闭<select，我想你也需要echo </select>。对于处理程序尝试

ac(document).on("click", "#RegionName"

您还有一个var RegionName=ab("#RegionName").val();，应该是var RegionName=ac("#RegionName").val();

更新：

行应该是

RegionName=ac(this).val();

更新2

改变

echo "<option value=".$value.">".$value."</option>";

到

echo "<option value='".$value."'>".$value."</option>";

Answer 2

对于动态元素，我们应该使用委托事件：

更改ac("#RegionName").change(function(){ /* handler body */ })

致ac(document).on("change","#RegionName",function(){ /* handler body */ })

---

也改ab("#CountryID").change(function(){ /* handler body */ })

致ab(document).on("change","#CountryID",function(){ /* handler body */ })

---

要获得选定的值，您可以在函数中执行以下操作

ab(document).on("change","#CountryID",function(){ 
    var countryId = ab(this).val();
    //or like => var countryId = ab(":selected", this).val(); 

    /* Rest of code */ 
})

在服务器端正确以下语句，您必须将value 括在引号中

echo "<option value='".$value."'>".$value."</option>";