Question

我为费用类别创建了一个选择框，为费用金额和一个按钮创建了输入框。

现在，当我选择类别并添加金额而不是点击添加按钮时，该值会附加到另一个div，但是选择框不能附加上面选择的值。

我在这里写了我的代码：

var rowCount;
if (jQuery('#addedRows').children().length > 0) {
    var get_id = jQuery("#addedRows").children().last().attr('id');
    var last_char = get_id.substr(8);
    //alert(last_char);
    rowCount = last_char;
} else {
    rowCount = 0;
}

function addMoreRows(frm) {
    var cats = $(".exp_cat option:selected").text();
    var cats_id = $(".exp_cat option:selected").val();
    //alert(cats_id);
    var amnt = $('.exp_amnt').val();
    if (amnt == "") {
        alert("Add expense amount");
        return false
    } else {
        rowCount++;
        var recRow = '<p class="col-md-12" id="rowCount' + rowCount + '">';
        recRow += '<tr>';
        recRow += '<td>';

        $('.exp_c_' + rowCount).val(cats_id);

        recRow += '<select class="exp_c exp_c_' + rowCount + '" name="ana_acc[' + rowCount + '][acc_cat]">';

        recRow += '<option value="1">general cost</option><option value="2">it cost</option><option value="4">test</option>';

        recRow += '</select>';

        recRow += '</td>';
        recRow += '<td><input class="col-md-4 form-control" name="ana_acc[' + rowCount + '][exp_ammount]" value="' + amnt + '" type="text"  class="form-control"/></td>';
        recRow += '<td><a href="##" class="btn btn-danger" onclick="removeRow(' + rowCount + ')">Delete</a></td>';
        recRow += '</tr></p>';
        jQuery('#addedRows').append(recRow);
    }
}

function removeRow(removeNum) {
    jQuery('#rowCount' + removeNum).remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-12 nopadding">
    <div class="col-md-5 nopadding">
        <select id="invoice" class="exp_cat selectpicker auto-toggle toggled" data-live-search="true" data-width="100%" name="exp_ana_cat">
         <option value="1">general cost</option>
         <option value="2">it cost</option>
         <option value="4">test</option> 
      </select>
    </div>
    <div class="col-md-5 nopadding">
        <input class="form-control exp_amnt" type="text" name="exp_ana_amnt" aria-required="true" aria-invalid="false">
    </div>
    <div class="col-md-2">
        <a href="##" onclick="addMoreRows(this.form);" class="add_exp btn btn-primary">Add</a>
    </div>
</div>
<div id="addedRows"></div>

根据示例，当您选择it cost类别而不是it cost时，应在附加数据中选择类别。

那我该怎么办呢？

Answer 1

你的意思是这样吗？

＆＃13;

var rowCount;
if (jQuery('#addedRows').children().length > 0) {
    var get_id = jQuery("#addedRows").children().last().attr('id');
    var last_char = get_id.substr(8);
    //alert(last_char);
    rowCount = last_char;
} else {
    rowCount = 0;
}

function addMoreRows(frm) {
    var cats = $(".exp_cat option:selected").text();
    var cats_id = $(".exp_cat option:selected").val();
    //alert(cats_id);
    var amnt = $('.exp_amnt').val();
    if (amnt == "") {
        alert("Add expense amount");
        return false
    } else {
        rowCount++;
        var recRow = '<p class="col-md-12" id="rowCount' + rowCount + '">';
        recRow += '<tr>';
        recRow += '<td>';

        $('.exp_c_' + rowCount).val(cats_id);

        recRow += '<select class="exp_c exp_c_' + rowCount + '" name="ana_acc[' + rowCount + '][acc_cat]">';

        recRow += '<option value="1">general cost</option><option value="2">it cost</option><option value="4">test</option>';

        recRow += '</select>';

        recRow += '</td>';
        recRow += '<td><input class="col-md-4 form-control" name="ana_acc[' + rowCount + '][exp_ammount]" value="' + amnt + '" type="text"  class="form-control"/></td>';
        recRow += '<td><a href="##" class="btn btn-danger" onclick="removeRow(' + rowCount + ')">Delete</a></td>';
        recRow += '</tr></p>';
        jQuery('#addedRows').append(recRow);
    }
  
  $('select:last').val($('select:first').val())
}

function removeRow(removeNum) {
    jQuery('#rowCount' + removeNum).remove();
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-12 nopadding">
    <div class="col-md-5 nopadding">
        <select id="invoice" class="exp_cat selectpicker auto-toggle toggled" data-live-search="true" data-width="100%" name="exp_ana_cat">
         <option value="1">general cost</option>
         <option value="2">it cost</option>
         <option value="4">test</option> 
      </select>
    </div>
    <div class="col-md-5 nopadding">
        <input class="form-control exp_amnt" type="text" name="exp_ana_amnt" aria-required="true" aria-invalid="false">
    </div>
    <div class="col-md-2">
        <a href="##" onclick="addMoreRows(this.form);" class="add_exp btn btn-primary">Add</a>
    </div>
</div>
<div id="addedRows"></div>

＆＃13;

<强>说明：

我已在$('select:last').val($('select:first').val())功能的最后一行添加addMoreRows。

Answer 2

移动线：

$('.exp_c_' + rowCount).val(cats_id);

之后

jQuery('#addedRows').append(recRow);

此元素在您追加之前不存在，因此您无法对其进行操作。

如果你坚持选择的解决方案：首先，选择：last，确保在你的示例中没有其他选择元素之前和之后。或者像你一样切换到使用带有ID的类名。

使用jquery在附加的选择框中获取选定的值

2 个答案: