Javascript 如何根据另一个动态下拉列表和文本框为动态文本框指定默认值？_Javascript_Php_Jquery

Javascript 如何根据另一个动态下拉列表和文本框为动态文本框指定默认值？

javascript php jquery

Javascript 如何根据另一个动态下拉列表和文本框为动态文本框指定默认值？,javascript,php,jquery,Javascript,Php,Jquery,我期待着做以下事情。尝试基于同一动态表中的下拉列表和文本框使Quantity列文本框具有默认值因此，在下图中，当单位下拉设置为2，然后在第2行中输入数量为5时，下面的任何一行都会有第2行中的默认数量。因此，第6行和第7行的默认值应为5 [更新]提供双向更新。我希望它能像您预期的结果一样工作，但仍然像我在评论中建议的那样，建议您考虑使用一种不依赖于设计的技术来管理它。像Javascript对象或本地存储设限值=[袋，千克]；功能性隐形眼镜{ 如果限制.indexOfe.target.val

我期待着做以下事情。尝试基于同一动态表中的下拉列表和文本框使Quantity列文本框具有默认值

因此，在下图中，当单位下拉设置为2，然后在第2行中输入数量为5时，下面的任何一行都会有第2行中的默认数量。因此，第6行和第7行的默认值应为5

[更新]提供双向更新。我希望它能像您预期的结果一样工作，但仍然像我在评论中建议的那样，建议您考虑使用一种不依赖于设计的技术来管理它。像Javascript对象或本地存储

设限值=[袋，千克]；功能性隐形眼镜{ 如果限制.indexOfe.target.value>-1{ e、 target.closesttr.querySelector.item_quantity.setAttributedisabled，禁用； }否则{ e、 target.closesttr.querySelector.item_quantity.removeattributed已禁用，禁用； } } $document.readyfunction{ $document.on'click'，'add'，函数{ var html=； html+=； html+=； html+=“选择UnitBagsInchKg234”； html+=； html+=； html+=； $'item_table'.appendhtml； }; $document.on'click'，'remove'，函数{ $this.最近的'tr'。删除； }; $document.on'change keyup focusout'，'.item_quantity'，函数{ //我用法语叫它，以避免与价值混淆。。。 var valeur=$this.val； var unitreference=$this.parentstr.findtd:first select.item_unit.val； $'.item_unit'.eachfunction{ 如果$this.val==unitreference{ $this.parentstr.findtd:eq2 input.item_quantity.valvalaleur.attr'disabled'，'disabled'； } }; $this.removeAttrIsabled； } $document.on'change'，'item_unit'，函数{ //使用单位选择器进行更新 var selectedUnit=$this.val； //这里我们查找用作参考的Quantity字段 var quantRef=$'select option[value='+selectedUnit+']：selected.parentstr.findtd:eq2 input.item_数量：not:disabled.val //console.logselectedUnit //console.logquantRef 干扰素{ $'.item_unit'.eachfunction{ 如果$this.val==selectedUnit{ $this.parentstr.findtd:eq2 input.item_quantity.valquantRef.attr'disabled'、'disabled'； } }; } } $“插入表单”。关于“提交”，functionevent{ 违约事件； var误差=； $'.item_name'.eachfunction{ var计数=1；如果$this.val=={ 错误+=在+计数+行输入项目名称

；返回false； } 计数=计数+1； }; $'.项_数量'.eachfunction{ var计数=1；如果$this.val=={ 错误+=在+计数+行输入项目数量

；返回false； } 计数=计数+1； }; $'.item_unit'.eachfunction{ var计数=1；如果$this.val=={ 错误+=在+计数+行选择单位

；返回false； } 计数=计数+1； }; var form_data=$this.serialize； iferror=={ $.ajax{ url:insert.php，方法：邮寄，数据：表格数据，成功：functiondata{ ifdata==“确定”{ $'item_table'.findtr:gt0.remove； $'error'.html'Item Details Saved'； } } }; }否则{ $'error'.html+error+； } }; }; 单元名称量

所以它会在您更新数量值并确保选择了一个单位后触发？[Quantity input onchange]=>get selected val Reference=>each select compare$'select'。val to Reference=>如果在同一行中相等更新数量字段，这只是想法/算法。。。如果你没有解决问题，我明天会发布答案。我已经尝试过了，但失败了。我可以将质量默认为一个值，但不是基于上面的值。比勒尔，这很好，但有两件事。1.如果所选物料单位相同，是否有方法更新物料数量？2.是否有一种方法可以禁用后来添加的相同但未禁用第一个项目数量的项目数量，以便在匹配的项目数量下进行更改和更新？是否像我在回答中所要求的那样：如果正在更新单位选择器，您想更新数量值？对于第二个选项：您的意思是只保留一个数量字段作为参考，并禁用复制其值的所有输入？可能：但你也需要考虑用户体验，以及你的用户如何理解它；我会尝试更新它

<html>
 <head>
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body>
  <div class="container">
   <form method="post" id="insert_form">
    <div class="table-repsonsive">
     <span id="error"></span>
     <table class="table table-bordered" id="item_table">
      <tr>
       <th>Unit</th>
       <th>Name</th>
       <th>Quantity</th>
       <th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th>
      </tr>
     </table>
     <div align="center">
      <input type="submit" name="submit" class="btn btn-info" value="Insert" />
     </div>
    </div>
   </form>
  </div>
 </body>
</html>

<script>
let restricts = ["bags", "kg"];
function hideQuantity(e) {
    if (restricts.indexOf(e.target.value) > -1) {
        e.target.closest("tr").querySelector(".item_quantity").setAttribute("disabled", "disabled");
    } else {
        e.target.closest("tr").querySelector(".item_quantity").removeAttribute("disabled", "disabled");
    }
}

$(document).ready(function(){
    $(document).on('click', '.add', function () {
        var html = '';
        html += '<tr>';
        html += '<td><select onclick="hideQuantity(event)" name="item_unit[]" id="item_unit" class="form-control item_unit">';
        html += '<option value="">Select Unit</option><option value="bags">Bags</option><option value="inch">Inch</option><option value="kg">Kg</option><?php echo numopt(); ?>';
        html += '</select></td>';
        html += '<td><input type="text" name="item_name[]"" class="form-control item_name" /></td>';
        html += '<td><input type="text" name="item_quantity[]"" class="form-control item_quantity" /></td>';
        html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
        $('#item_table').append(html);
    });

 $(document).on('click', '.remove', function(){
  $(this).closest('tr').remove();
 });
    
 $('#insert_form').on('submit', function(event){
  event.preventDefault();
  var error = '';
  $('.item_name').each(function(){
   var count = 1;
   if($(this).val() == '') {
    error += "<p>Enter Item Name at "+count+" Row</p>";
    return false;
   }
   count = count + 1;
  });
  
  $('.item_quantity').each(function(){
   var count = 1;
   if($(this).val() == '') {
    error += "<p>Enter Item Quantity at "+count+" Row</p>";
    return false;
   }
   count = count + 1;
  });
  
  $('.item_unit').each(function(){
   var count = 1;
   if($(this).val() == '') {
    error += "<p>Select Unit at "+count+" Row</p>";
    return false;
   }
   count = count + 1;
  });
     
  var form_data = $(this).serialize();
  if(error == '') {
   $.ajax({
    url:"insert.php",
    method:"POST",
    data:form_data,
    success:function(data) {
     if(data == 'ok') {
      $('#item_table').find("tr:gt(0)").remove();
      $('#error').html('<div class="alert alert-success">Item Details Saved</div>');
     }
    }
   });
  } else {
   $('#error').html('<div class="alert alert-danger">'+error+'</div>');
  }
 });
});

</script>