CODEWITHSUNDEEP
javascriptjqueryhtmlcodeigniter
Nisarg Bhavsar
Nisarg Bhavsar

Reputation: 956

Get selected value in appended select box using jquery

I have created one select box for expense category and input box for expense amount and one button.

Now, when I select category and add amount than click on Add button then that value append to the another div but select box can not append with the above selected value.

Here I have write my code :

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>

As per the example, when you select it cost category than it cost category should be selected in appended data.

So what should I have to do ?

Upvotes: 0

Views: 969

Answers (2)

Mikołaj Żarnawski
Mikołaj Żarnawski

Reputation: 96

Move the line:

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

after 

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

This element does not exist until you append it so you cannot really do operations on it.

If you stick to the solution with select:first, select:last, make sure that there are no other select elements before and after the ones you have in your examples. Or switch to using class names with IDs as you do.

Upvotes: 1

Fadhly Permata
Fadhly Permata

Reputation: 1686

Did you mean like this?

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();
}
<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>

EXPLAIN:

I've add $('select:last').val($('select:first').val()) on last line off addMoreRows function.

Upvotes: 2

Related Questions