下拉选择在克隆过程中不作为一部分。

huangapple
go评论101阅读模式
英文:

dropdown select not being part upon the process of cloning

问题

克隆代码是有效的，只是下拉选择框没有被包括在克隆过程中。

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  3. <!-- language: lang-js -->
  4. $(&quot;input.tr_clone_add&quot;).live(&#39;click&#39;, function() {
  5.   var $tr = $(this).closest(&#39;.tr_clone&#39;);
  6.   var $clone = $tr.clone();
  7.   $clone.find(&#39;.form-control js-example-basic-single&#39;).val(&#39;&#39;);
  8.   // 下面添加获取下拉选择框值的代码
  9.   var selectValue = $tr.find(&#39;select[name="animal"]&#39;).val();
  10.   $clone.find(&#39;select[name="animal"]&#39;).val(selectValue);
  11.   $tr.after($clone);
  12. });
  14. <!-- language: lang-html -->
  15. <table>
  16.   <tr class=&quot;tr_clone&quot;>
  17.     <td>
  18.       <input type=&quot;button&quot; name=&quot;add&quot; value=&quot;clone row&quot; class=&quot;tr_clone_add&quot; />&lt;br&gt;&lt;br&gt;
  19.       <select name=&quot;animal&quot; id=&quot;number&quot;>
  20.         <option value=&quot;cow&quot;>cow&lt;/option&gt;
  21.         <option value=&quot;horse&quot;>horse&lt;/option&gt;
  22.         <option value=&quot;dog&quot;>dog&lt;/option&gt;
  23.         <option value=&quot;cat&quot;>cat&lt;/option&gt;
  24.       </select>
  25.       &nbsp;
  26.       <select name=&quot;vehicle&quot; id=&quot;letter&quot;>
  27.         <option value=&quot;car&quot;>car&lt;/option&gt;
  28.         <option value=&quot;ship&quot;>ship&lt;/option&gt;
  29.         <option value=&quot;plane&quot;>plane&lt;/option&gt;
  30.       </select>
  31.       &nbsp;
  32.       <input name=&quot;remarks&quot; type=&quot;text&quot;>
  33.       <br>
  34.       <hr>
  35.     </td>
  36.   </tr>
  37. </table>
  38. </body>
  40. <script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js&quot;></script>
  42. <!-- end snippet -->

我尝试的目标是，在克隆行的过程中，也将行的下拉选择框的值传递给要克隆的行。

英文:

Cloning code works it's just that the dropdown select is not being part of the cloning process.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. $(&quot;input.tr_clone_add&quot;).live(&#39;click&#39;, function() {
  2.   var $tr = $(this).closest(&#39;.tr_clone&#39;);
  3.   var $clone = $tr.clone();
  4.   $clone.find(&#39;.form-control js-example-basic-single&#39;).val(&#39;&#39;);
  5.   $tr.after($clone);
  6. });

<!-- language: lang-html -->

  1. &lt;table&gt;
  2.   &lt;tr class=&quot;tr_clone&quot;&gt;
  3.     &lt;td&gt;
  4.       &lt;input type=&quot;button&quot; name=&quot;add&quot; value=&quot;clone row&quot; class=&quot;tr_clone_add&quot; /&gt;&lt;br&gt;&lt;br&gt;
  5.       &lt;select name=&quot;animal&quot; id=&quot;number&quot;&gt;
  6.         &lt;option value=&quot;cow&quot;&gt;cow&lt;/option&gt;
  7.         &lt;option value=&quot;horse&quot;&gt;horse&lt;/option&gt;
  8.         &lt;option value=&quot;dog&quot;&gt;dog&lt;/option&gt;
  9.         &lt;option value=&quot;cat&quot;&gt;cat&lt;/option&gt;
  10.       &lt;/select&gt;
  11.       &amp;nbsp;
  12.       &lt;select name=&quot;vehicle&quot; id=&quot;letter&quot;&gt;
  13.         &lt;option value=&quot;car&quot;&gt;car&lt;/option&gt;
  14.         &lt;option value=&quot;ship&quot;&gt;ship&lt;/option&gt;
  15.         &lt;option value=&quot;plane&quot;&gt;plane&lt;/option&gt;
  16.       &lt;/select&gt;
  17.       &amp;nbsp;
  18.       &lt;input name=&quot;remarks&quot; type=&quot;text&quot;&gt;
  19.       &lt;br&gt;
  20.       &lt;hr&gt;
  21.     &lt;/td&gt;
  22.   &lt;/tr&gt;
  23. &lt;/table&gt;
  24. &lt;/body&gt;
  26. &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js&quot;&gt;&lt;/script&gt;

<!-- end snippet -->

What I am trying to do is, also pass the value of dropdown select of row to be cloned upon the process of cloning the row.

答案1

得分: 0

  1. **live**已被弃用，因此请更新您的jQuery库。

  2. 对于您的问题：

    1. 首先查找并获取选定的选项，然后将属性selected添加到选定的选项上。

    2. 要获取动态创建元素的事件，请使用事件委托。

示例：

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  3. <!-- language: lang-js -->
  4. $(document).on("change", "select", function() {
  5.   var val = $(this).val(); 
  6.   $("option", this).removeAttr("selected").filter(function() {
  7.     return $(this).attr("value") == val;
  8.   }).first().attr("selected", "selected");
  9. });
  10. $('body').on('click', 'input.tr_clone_add', function() {
  11.   var $tr = $(this).closest('.tr_clone');
  12.   var $clone = $tr.clone();
  13.   $clone.find('.form-control js-example-basic-single').val('');
  14.   $tr.after($clone);
  15. });
  17. <!-- language: lang-html -->
  18. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  19. <table>
  20.   <tr class="tr_clone">
  21.     <td>
  22.       <input type="button" name="add" value="clone row" class="tr_clone_add" /><br><br>
  23.       <select name="animal" id="number">
  24.         <option value="cow">cow</option>
  25.         <option value="horse">horse</option>
  26.         <option value="dog">dog</option>
  27.         <option value="cat">cat</option>
  28.       </select>
  29.       &nbsp;
  30.       <select name="vehicle" id="letter">
  31.         <option value="car">car</option>
  32.         <option value="ship">ship</option>
  33.         <option value="plane">plane</option>
  34.       </select>
  35.       &nbsp;
  36.       <input name="remarks" type="text">
  37.       <br>
  38.       <hr>
  39.     </td>
  40.   </tr>
  41. </table>
  42. </body>
  44. <!-- end snippet -->
英文:

  1. live is deprecated so update your jQuery library.

  2. For your question:

    1. First of all find and get selected option and add attribute selected to selected option.

    2. To get events of dynamic created elements , use event delegation.

Example:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. $(document).on(&quot;change&quot;, &quot;select&quot;, function() {
  2.   var val = $(this).val(); 
  3.   $(&quot;option&quot;, this).removeAttr(&quot;selected&quot;).filter(function() {
  4.     return $(this).attr(&quot;value&quot;) == val;
  5.   }).first().attr(&quot;selected&quot;, &quot;selected&quot;);
  6. });
  7. $(&#39;body&#39;).on(&#39;click&#39;, &#39;input.tr_clone_add&#39;, function() {
  8.   var $tr = $(this).closest(&#39;.tr_clone&#39;);
  9.   var $clone = $tr.clone();
  10.   $clone.find(&#39;.form-control js-example-basic-single&#39;).val(&#39;&#39;);
  11.   $tr.after($clone);
  12. });

<!-- language: lang-html -->

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  2. &lt;table&gt;
  3.   &lt;tr class=&quot;tr_clone&quot;&gt;
  4.     &lt;td&gt;
  5.       &lt;input type=&quot;button&quot; name=&quot;add&quot; value=&quot;clone row&quot; class=&quot;tr_clone_add&quot; /&gt;&lt;br&gt;&lt;br&gt;
  6.       &lt;select name=&quot;animal&quot; id=&quot;number&quot;&gt;
  7.         &lt;option value=&quot;cow&quot;&gt;cow&lt;/option&gt;
  8.         &lt;option value=&quot;horse&quot;&gt;horse&lt;/option&gt;
  9.         &lt;option value=&quot;dog&quot;&gt;dog&lt;/option&gt;
  10.         &lt;option value=&quot;cat&quot;&gt;cat&lt;/option&gt;
  11.       &lt;/select&gt;
  12.       &amp;nbsp;
  13.       &lt;select name=&quot;vehicle&quot; id=&quot;letter&quot;&gt;
  14.         &lt;option value=&quot;car&quot;&gt;car&lt;/option&gt;
  15.         &lt;option value=&quot;ship&quot;&gt;ship&lt;/option&gt;
  16.         &lt;option value=&quot;plane&quot;&gt;plane&lt;/option&gt;
  17.       &lt;/select&gt;
  18.       &amp;nbsp;
  19.       &lt;input name=&quot;remarks&quot; type=&quot;text&quot;&gt;
  20.       &lt;br&gt;
  21.       &lt;hr&gt;
  22.     &lt;/td&gt;
  23.   &lt;/tr&gt;
  24. &lt;/table&gt;
  25. &lt;/body&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年1月9日 10:22:25
  • 转载请务必保留本文链接：https://go.coder-hub.com/75052659.html
  • html
  • javascript
  • jquery
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定