Question

我有一个jquery函数，可以在选择下拉选项时更新一些输入框。我还使用与第一个选择具有相同ID的addRow函数动态添加任意数量的选择。但是，不会为新选择触发jquery函数。下面是我更新输入框的jquery：

$('#menusName').on("change",function ()
{
 var menId = $(this).val(); 

$.ajax
({
  url: "<?php echo base_url(); ?>" + "index.php/MainController/menuDetails",
  async: false,
  type: "POST",
  data: "name="+menId,
  dataType: "json",

  success:(function(data) 
  {
    $('#makes').val(data[0]);
    $('#type').val(data[1]);
  })
})});

还有addRow函数：

function addRow(tableID)
{
        var table=document.getElementById(tableID);
        var rowCount=table.rows.length;
        var row=table.insertRow(rowCount);
        var colCount=table.rows[0].cells.length;

        for(var i = 0; i < colCount; i++)
        {
            var newcell = row.insertCell(i);
            var oldId = table.rows[0].cells[i].childNodes[1].text;
            newcell.innerHTML = table.rows[0].cells[i].innerHTML;

            switch(newcell.childNodes[i])
            {
                case"#text":
                  newcell.childNodes[i].value="";
                  break;
                case"#checkbox":
                  newcell.childNodes[i].checked=false;
                  break;
                case"#select-one":
                  newcell.childNodes[i].selectedIndex=0;
                  break;
            }


        }
  }

我的HTML代码如下：

<table id="recipes" class="table">
        <a href="#" onclick="addRow('recipes');" class="btn btn-default">
            <span class="glyphicon glyphicon-plus"></span> Add Another Recipe
        </a>
        <a href="#" onclick="deleteRow('recipes');" class="btn btn-danger">
            <span class="glyphicon glyphicon-trash"></span>
        </a>
        <tr>
            <td>
                <select name="menusName" id="menusName" required>
                    <option>Choose a Menu</option>
                    <?php if($menus != null){
                        foreach($menus as $r){ ?>
                        <option><?php echo $r->menuName;?></option>
                    <?php }}?>
                </select>
            </td>
            <td>Makes: <input readonly name="makes" id="makes" type="text" required/></td>
            <td>Cake Type: <input readonly name="type" id="type" type="text" required/></td>
            <td>Multiply Recipe by: <input name="mulRecipe" id="mulRecipe" type="text" required/></td>
        </tr>
    </table>

Answer 1

尝试使用$( document ).ready()功能：

 $( document ).ready(function() {
   /* your code  */
 });

jquery更新动态添加下拉列表

1 个答案: