Question

我为我的表单创建了一个Repeater，我希望通过在max=""的下拉列表中选择将data-max="futureMaxValueHere"设置为数字字段。

这是第一行：

<div id="newlink" class="col-md-8 col-md-offset-2">
    <div class="row">
        <div id='produitdiv' class="form-group col-md-8">
            <select class="form-control" name="produit[]" id="produit" onchange="getMax(this.parentNode.parentNode.id)">
                <option value="choix">Choisir un produit</option>
                <?php for($i = 0; $i < count($arrayInventaire); $i++){
                    echo '<option value="'.$arrayInventaire[$i]['nom_du_materiel'].'" data-max="'.$arrayInventaire[$i]['quantite_autorisee_par_commande'].'">'.$arrayInventaire[$i]['nom_du_materiel'].'</option>';

                    $arrayProduits[$i]['nom'] = $arrayInventaire[$i]['nom_du_materiel'];
                    $arrayProduits[$i]['max'] = $arrayInventaire[$i]['quantite_autorisee_par_commande'];
                }?>
            </select>
        </div> 
        <div id='nombrediv' class="form-group col-md-3 col-xs-10">
            <input type="number" class="form-control" name="nombre[]" id="nombre" max="" min="0">
        </div>
        <div>
            <a href="javascript:new_link()"><i class="fa fa-plus-circle fa-2x" aria-hidden="true"></i></a>
        </div>
    </div>
</div>

这是转发器：

<div id="newlinktpl" style="display:none">
<div class="row">
    <div id='produitdiv' class="form-group col-md-8">
        <select class="form-control" name="produit[]" id="produit" onchange="getMax(this.parentNode.parentNode.id)">
            <option value="choix">Choisir un produit</option>
            <?php for($i = 0; $i < count($arrayInventaire); $i++){
                echo '<option value="'.$arrayInventaire[$i]['nom_du_materiel'].'" data-max="'.$arrayInventaire[$i]['quantite_autorisee_par_commande'].'">'.$arrayInventaire[$i]['nom_du_materiel'].'</option>';
            }?>
        </select>
    </div> 
    <div id='nombrediv' class="form-group col-md-3 col-xs-10">
        <input type="number" class="form-control" name="nombre[]" id="nombre" max="" min="0">
    </div>
    <a href="javascript:new_link()"><i class="fa fa-plus-circle fa-2x" aria-hidden="true"></i></a>
    <a href="javascript:" onClick='delIt(this.parentNode.parentNode.id)'><i class="fa fa-minus-circle fa-2x" aria-hidden="true" style="color:red;"></i></a>
</div>

转发函数添加删除（JS）：

var ct = 1;
function new_link()
{
    ct++;
    var div1 = document.createElement('div');
    div1.id = ct;
    div1.innerHTML = document.getElementById('newlinktpl').innerHTML;
    document.getElementById('newlink').appendChild(div1);
}
// function to delete the newly added set of elements
function delIt(eleId)
{
    d = document;
    var ele = d.getElementById(eleId);
    var parentEle = d.getElementById('newlink');
    parentEle.removeChild(ele);
}

这是函数（JS）：

function getMax(element){
    doc = document;
    var ele = doc.getElementById(element);
    var select = doc.getElementById('produit');
    var number = doc.getElementById('nombre');
    jQuery(number).prop('max',jQuery(select).find(':selected').data("max"));
    console.log("max: " + jQuery(select).find(':selected').data("max"));

}

该功能适用于第一行。后续行返回select的第一行的data-max。

Answer 1

也许你的转发器丢失</div> 并选择框和标记调用delIt函数不在一个容器中我看到你使用jQuery，所以我有一个解决方案

html代码，你只使用这个

<div id="newlink" class="col-md-8 col-md-offset-2">
  <div class="row">
    <div id='produitdiv' class="form-group col-md-8">
        <select class="form-control" name="produit[]" onchange="getMax(this)">
            <option value="choix">Choisir un produit</option>
            <?php for($i = 0; $i < count($arrayInventaire); $i++){
                echo '<option value="'.$arrayInventaire[$i]['nom_du_materiel'].'" data-max="'.$arrayInventaire[$i]['quantite_autorisee_par_commande'].'">'.$arrayInventaire[$i]['nom_du_materiel'].'</option>';

                $arrayProduits[$i]['nom'] = $arrayInventaire[$i]['nom_du_materiel'];
                $arrayProduits[$i]['max'] = $arrayInventaire[$i]['quantite_autorisee_par_commande'];
            }?>
        </select>
    </div> 
    <div class="form-group col-md-3 col-xs-10">
        <input type="number" class="form-control" name="nombre[]"  max="" min="0">
    </div>
    <div class="control-wrap">
        <a href="javascript:new_link()"><i class="fa fa-plus-circle fa-2x" aria-hidden="true"></i></a>
    </div>
</div>

我删除了所有id属性，因为id是唯一的，并将class control-wrap添加到div。这是javascript代码

var repeater = jQuery(jQuery('#newlink').html());
 repeater.find('.control-wrap').append('<a href="javascript:" onClick="delIt(this)"><i class="fa fa-minus-circle fa-2x" aria-hidden="true" style="color:red;"></i> </a>');

function new_link()
    {
        jQuery('#newlink').append('<div class="row">'+repeater.html()+'</div>');
    }
    function delIt(element)
    {
    console.log(jQuery(element).parents('.row'))
        jQuery(element).parents('.row').remove();
    }
    function getMax(element){
       var max = jQuery(element).find(':selected').data("max");
    jQuery(element).parents('.row').find('input[name="nombre[]"]').prop('max',max);
 console.log(max);

}

Answer 2

首先，ID是唯一的（意味着它们应该在DOM中出现一次）。因为您将重复使用转发器即模板，请确保您不使用其中的任何ID。将produitdiv，nombrediv和nombre更改为类。

其次，您正在使用jQuery：利用它。停止使用丑陋的document.getElementByWhatever和on*属性。相反，请使用$(selector)语法和event handlers。

现在，因为您正在动态创建元素，所以您需要创建委派的事件处理程序。有关详细信息，请阅读Understanding Event Delegation。

<强>演示

＆＃13;

$(function() {
  // attach an onchange event handler to all dropdowns
  $(document).on('change', 'select[name="produit[]"]', function() {
    // create jQuery object out of current element
    var select = $(this);
    // get selected max value
    var maxVal = select.find(':selected').data('max');
    // get related nombre[] field
    // both produit[] and nombre[] field share the same containing .row div
    var row = select.closest('.row');
    // then search for nombre[] within the container
    var input = row.find('input[name="nombre[]"]');
    // set nombre[]'s max value
    input.attr('max', maxVal);
  });

  // attach onclick event handler to all New links
  $(document).on('click', '.new', function(e) {
    // this is a link, so prevent the link from doing anything
    e.preventDefault();
    // add new row after current row
    $(this).closest('.row').after($('#template').html());
  });

  // attach onclick event handler to all Delete links
  $(document).on('click', '.delete', function(e) {
    // this is a link, so prevent the link from doing anything
    e.preventDefault();
    // delete current row
    $(this).closest('.row').remove();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <!-- change ID to class -->
  <div class="form-group col-md-8 produitdiv">
    <select class="form-control" name="produit[]">
         <option value="choix">Choisir un produit</option>
		 <!-- let's just suppose data-max = N in Produit #N -->
         <option data-max="1">Produit #1</option>
		 <option data-max="2">Produit #2</option>
		 <option data-max="3">Produit #3</option>
    </select>
  </div>
  <!-- change ID to class -->
  <div class="form-group col-md-3 col-xs-10 nombrediv">
    <input type="number" class="form-control nombre" name="nombre[]" max="0" min="0">
  </div>
  <div>
    <!-- add class -->
    <a href="#" class="new">New</a>
  </div>
</div>

<div id="template" style="display:none">
  <!-- same thing -->
  <div class="row">
    <div class="form-group col-md-8 produitdiv">
      <select class="form-control" name="produit[]">
			<option value="choix">Choisir un produit</option>
			<option data-max="1">Produit #1</option>
			<option data-max="2">Produit #2</option>
			<option data-max="3">Produit #3</option>
	  </select>
    </div>
    <div class="form-group col-md-3 col-xs-10 nombrediv">
      <input type="number" class="form-control nombre" name="nombre[]" max="0" min="0">
    </div>
    <div>
      <a href="#" class="new">New</a>
      <!-- add class -->
      <a href="#" class="delete">Delete</a>
    </div>
  </div>
</div>

＆＃13;

在Repeater中设置数字形式的最大值Javascript

2 个答案: