jQuery在上面的div中获取select的值

Question

I have the following HTML form. I'm trying to get the value of the .plotNumber select and also the value of the sub_category field.

Note: The user is able to add new rows to the form, so there may be multiple blocks of <div class="standard-row add-admin-row input-row"> .

My code so far (which works) apart from the plot and category is:

$('.wrapper').on('input', '.inp-calculate', function(e) 
{
    var input       = $(this);
    //var plot      = input.val(); // get plot id
    //var category  = input.val(); // get category id
    var units       = input.val(); // get units

    $.post('checkUnits.php', {
        plot_id:        plot,
        category_id:    category,
        units:          units
    }, function(data) {
        var data = $.parseJSON(data);

        if(data[0] !== true) {
            alert(data);
            input.focus();
            input.val('');
        }
    });
});

I have tried the following solutions which do not work:

$(this).parent().siblings().find('.plotNumber').val();

HTML Code:

<form class="commentForm add-project-form clearfix" id="addWorksheet">
   <div class="box box3 clearfix">
      <div id="messages"></div>
      <div class="sectionbox">
         <fieldset class="clonable">
            <legend><span>Worksheet</span></legend>
            <p class="error-summary error-message"></p>
            <div class="standard-row add-admin-row input-row">
               <label class="ib">
                  <span class="label-stacked">Employee</span> 
                  <span class="plain-select">
                     <select class="inp" data-myname="worksheet[*][employee]" name="employee">
                        <option value="">Select one...</option>
                        <option value="1">Test 1</option>
                     </select>
                  </span>
               </label>
               <label class="ib">
                  <span class="label-stacked">Week ending</span> 
                  <span class="plain-select">
                     <select class="inp" data-myname="worksheet[*][week_ending]" name="week_ending">
                        <option value="">Select one...</option>
                        <option value="Sunday 22 Nov 2015">Sunday 22 Nov 2015</option>
                     </select>
                  </span>
               </label>
               <label class="ib">
                  <span class="label-stacked">Project</span> 
                  <span class="plain-select">
                     <select class="inp project" data-myname="worksheet[*][project]" name="project">
                        <option value="">Select one...</option>
                        <option value="2">TEST</option>
                     </select>
                  </span>
               </label>
            </div>
            <div class="standard-row wsheet-row input-row">
               <label class="ib plothead ">
                  <span class="label-stacked">Plot Number</span> 
                  <span class="plain-select">
                     <select class="inp plotNumber plotheadclone" data-myname="worksheet[*][plots][!][plot_number]" name="plot_number">
                        <option value="">Select one...</option>
                        <option value="6672">444</option>
                        <option value="6673">555</option>
                        <option value="6674">666</option>
                     </select>
                  </span>
               </label>
               <div class="plot-offset clearfix">
                  <div class="standard-row wsheet-row input-row" id="5438">
                     <label class="ib">
                        <span class="label-stacked">Category</span>
                        <select class="inp inp220 inp-disabled" readonly="" data-myname="worksheet[*][plots][!][sub_category][]" name="sub_category">
                           <option value="5438">NON LABOUR</option>
                        </select>
                     </label>
                     <label class="ib"><span class="label-stacked">Total</span>
                     <input class="inp inp110 data-addup-total inp-calculate" data-myname="worksheet[*][plots][!][total_cost][]" name="total_cost" value="0.00" type="text">
                     <input data-myname="worksheet[*][plots][!][price][]" name="price" value="" type="hidden">
                     <input data-myname="worksheet[*][plots][!][number_units][]" name="number_units" value="" type="hidden">
                     </label>
                  </div>
                  <div class="standard-row wsheet-row input-row" id="5240">
                     <label class="ib">
                        <span class="label-stacked">Category</span>
                        <select class="inp inp220 inp-disabled" readonly="" data-myname="worksheet[*][plots][!][sub_category][]" name="sub_category">
                           <option value="5240">1ST FIX CYLINDER</option>
                        </select>
                     </label>
                     <label class="ib"> 
                     <span class="label-stacked">Price</span>
                     <input class="inp inp110 inp-disabled" readonly="" data-myname="worksheet[*][plots][!][price][]" name="price" value="£40.00" type="text"></label>
                     <label class="ib"> <span class="label-stacked">Number</span>
                     <input class="inp inp55 inp-calculate" data-myname="worksheet[*][plots][!][number_units][]" name="number_units" value="" type="text"></label><label class="ib"><span class="label-stacked">Total</span><input class="inp inp110 inp-disabled data-addup-total" readonly="" data-myname="worksheet[*][plots][!][total_cost][]" name="total_cost" value="£0.00" type="text"></label>
                  </div>
                  <div class="wsheet-labour-total">LABOUR: £80.00</div>
                  <div class="wsheet-nonlabour-total">NON LABOUR: £0.00</div>
                  <div class="wsheet-final-total">TOTAL CLAIM: £80.00</div>
               </div>
            </div>
         </fieldset>
         <div class="reveal-plot showingPlot"> <a href="#" class="button button-choose">Choose another plot</a></div>
      </div>
      <!-- end section box -->
      <hr class="divider">
      <div class="clonable">
         <div class="clone empty"></div>
         <div class="cb">
            <div>
               <p class="add remove-data"><i class="sprite minus2"></i> <span>Remove last row</span></p>
            </div>
            <div>
               <p class="add add-data add-another-worksheet-employee"><i class="sprite plus2"></i> <span>Add another worksheet</span></p>
            </div>
         </div>
      </div>
      <div class="save-submit">
         <button class="button" type="submit" data-url="addWorksheet.php" data-id="#addWorksheet">Submit</button>
      </div>
   </div>
   <!-- end box -->
</form>

Can someone help find the solution?

Answer 1

You're not traversing far enough up the DOM with .parent() since the select is contained in a <div> three levels above .inp-calculate . How about:

$(this).closest('fieldset').find('.plotNumber').val();

Answer 2

Try like following. Hope this will help you.

var container=$(this).closest('.standard-row.add-admin-row.input-row');
var plot=container.find('.plotNumber').val();
var category=container.find('.inp220').val();