【问题标题】:How to select nearest div of select element in parents Untill如何在父母Untill中选择最近的选择元素的div
【发布时间】:2018-01-03 07:05:17
【问题描述】:
<div id="installation-table">
 <div class="row bg-info installation-product-item-row form-group m-t-5" data-install="0"><div>
 <div class="row bg-info installation-product-item-row form-group m-t-5" data-install="1"><div>
 <div class="row bg-info installation-product-item-row form-group m-t-5" data-install="2"><div>
</div>

在每个 div 中我都有输入字段并选择选择器,

如果要更改输入字段中的某些值,我需要选择它所在的确切 div 的选择选择器值,

但每次 selectpicker 值都在第一个 div(data-install="0") 中获取选择选择器值

 $(document).on('change', '.installation-product-qty', function (e)
            {
                e.preventDefault();
                var index = $(this).parentsUntil('.installation-product-item-row').parent().data('install');
                var room = $(this).parentsUntil('.room-table').parent().data('room');
                installation[index].qty = Math.ceil($(this).val());
                var conversion_rate = $(this).parentsUntil('.installation-product-item-row').find('.installation-product-item-measurement option:selected').data('conversion_rate') // always taking first value 
            });

点击了解更多详情

[![在此处输入图片描述][1]][1]

<div id="new-installation-product" class="hidden">
    <div class="row bg-info installation-product-item-row form-group m-t-5">
        <div class="col-sm-2 col-lg-2"><label class="installation-product-name"></label></div>
        <div class="col-sm-4 col-lg-4">
            <div class="row m-t-5">

                <div class="col-sm-6 col-lg-6">
                    <input type="text" class="form-control installation-product-item-area">
                </div>
                <div class="col-sm-6 col-lg-6">
                    <select class="form-control simple installation-product-item-measurement " data-live-search="true">
                        <?php foreach ($measurements as $measurement): ?>
                                <option value="<?= $measurement->getId() ?>"><?= $measurement->getName() ?></option>
                            <?php endforeach; ?>
                    </select>
                </div>
                <!--                <div class="col-sm-4 text-right col-lg-4">
                                    <span class="installation-product-box-qty"></span>
                                </div>                -->
            </div>            
        </div>
        <div class="col-sm-2 col-lg-2 text-right">
            <!--            <label class="installation-product-qty"></label>-->


            <input type="text" class="form-control installation-product-qty installation-product-qty-change">
        </div> 
        <div class="col-sm-2 col-lg-2">
            <div class="row form-group">
                <div class="col-sm-6">
                    <input type="text" class="form-control installation-product-price">
                </div>
                <div class="col-sm-6">
                    <select class="form-control installation-qty-closed-stock-unit-label  m-0 simple" disabled="disabled"></select>
                </div>
            </div>
        </div>
        <div class="col-sm-1 col-lg-1 installation-item-tax m-t-5">
            <select class="installation-product-tax form-control simple" data-live-search="true">
                <option value="">Select</option>
            </select> 
        </div>
        <div class="col-sm-1 col-lg-1  text-right"><label class="installation-product-amount"></label></div>
    </div>
</div>

【问题讨论】:

  • HTML 中的.installation-product-qty 在哪里?也分享一下
  • 这里提到的html代码是否完整.....
  • 不完全不。
  • .installation-product-qty 在 div 里面
  • inputselectpicker 在哪里?请将他们的代码添加到您的问题中

标签: javascript jquery html


【解决方案1】:

$(document).on('change', '.installation-product-qty', function(e) {
  e.preventDefault();
  alert($(this).parent().find(".installation-product-item-measurement  option:selected").text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="installation-table">
  <div class="row bg-info installation-product-item-row form-group m-t-5" data-install="0">
    <input class="installation-product-qty" type="text" />
    <select class="installation-product-item-measurement">
      <option>1</option>
      <option selected>2</option>
    </select>
  </div>
  <div class="row bg-info installation-product-item-row form-group m-t-5" data-install="1">
    <input class="installation-product-qty" type="text" />
    <select class="installation-product-item-measurement">
      <option>1</option>
      <option selected>3</option>
    </select>
  </div>
  <div class="row bg-info installation-product-item-row form-group m-t-5" data-install="2">
    <input class="installation-product-qty" type="text" />
    <select class="installation-product-item-measurement">
      <option>1</option>
      <option selected>4</option>
    </select>
  </div>

</div>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-12-08
    • 2013-05-27
    • 2016-08-28
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多