Question

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

这是Div：

<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('#RegionName').selectmenu('refresh', true); from this answer下尝试了ab( "#result" ).html(data);，但它没有效果

更新：

如果我们附加$( "#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();

<强> UPDATE2

更改

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

生成选择列表项目问题

更新：

2 个答案: