克隆后的下拉菜单保持一个选定的选项的值，并重置第二个下拉jquery

tkclm6bt 于 2023-05-06 发布在 jQuery

关注(0)|答案(1)|浏览(181)

我有一个表与2链接下拉菜单，我必须克隆上选择服务下拉列表。根据第一个下拉菜单的选择弹出第二个下拉菜单 （此部分有效）。我成功地克隆了它们。但是，每个克隆必须保留Area下拉列表的选定值，Services下拉列表必须保留结果，但未选中选项。

<table class="table table-sm table-striped mb-0">
    <thead>
    <tr class="bg-th">
    <th >
    Country
    </th>
    <th scope="col">
    Towns
    </th>

    </tr>
    </thead>

    <tbody>
    <tr>
    <td >
    <select class="form-select" onChange="center_area_on_change(this);">
    <option value=""></option>

    </select>
    </td>
    <td style="width:280px;display:block">

    <select style='width:100%' onChange="getTarifDataSeguroPrivado(this);">

    </select>

    </td>

    </tr>
  </tbody>
    </table>

center_area_on_change功能在选择时弹出 Services 下拉菜单。
getTarifDataSeguroPrivado函数调用克隆行的函数 function addRow。

function getTarifDataSeguroPrivado(dropDown) {

  addRow();

}

x1c 0d1x addRow（）函数。*

function addRow() {

var tableBody = $('#table-tarifario').find("tbody");
var trLast = tableBody.find("tr:last");

var trNew = trLast.clone();

trNew.find('select').val(function(index, value) {
return trLast.find('select').eq(index).val();
});

trLast.after(trNew);

}

1.如何在克隆新行时保留区域下拉列表的选定值，并保留服务下拉列表的结果（未选定数据）？
2-我尝试使用select 2，但它不能应用于所有下拉列表，尽管我像这样破坏它们：$（“select”）.select2（“destroy”）;

jquery

来源：https://stackoverflow.com/questions/76059660/after-clone-dropdown-keep-value-of-one-selected-option-and-reset-the-second-drop

1条答案

按热度按时间

piztneat1#

我不确定我是否完全理解你的要求。此外，我发现很难重现您的问题，因为您提供的代码似乎不完整-<select>菜单没有选项，表选择器'#table-tarifario'不存在。
但是，我提供了一些代码，至少应该让你接近你正在寻找的东西。我正在获取最后一行中所选选项的索引，并使用它在新行中设置所选选项。

function center_area_on_change (el) {
  console.log(el);
}

function getTarifDataSeguroPrivado(dropDown) {
  addRow();
}

function addRow() {
  $('table select').select2('destroy');
  var tableBody = $('table').find("tbody");
  var trLast = tableBody.find("tr:last");
  var trNew = trLast.clone();

  const lastSelectedCountryIndex = trLast.find('select').eq(0).find('option:selected').index();
 
trNew.find('select').eq(0).find('option').eq(lastSelectedCountryIndex).prop('selected', true);

  trLast.after(trNew);
  $('table select').select2();
}

$('table select').select2();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>
 <table class="table table-sm table-striped mb-0">
   <thead>
     <tr class="bg-th">
       <th>
         Country
       </th>
       <th scope="col">
         Towns
       </th>

     </tr>
   </thead>

   <tbody>
     <tr>
       <td>
         <select class="form-select" onChange="center_area_on_change(this);">
            <option value=""></option>
            <option>Country 1</option>
            <option>Country 2</option>
            <option>Country 3</option>
            <option>Country 4</option>
         </select>
       </td>
       <td style="width:280px;display:block">

         <select style='width:100%' onChange="getTarifDataSeguroPrivado(this);">
          <option></option>
          <option>Town 1</option>
          <option>Town 2</option>
          <option>Town 3</option>
          <option>Town 4</option>
          <option>Town 5</option>
         </select>

       </td>

     </tr>
   </tbody>
 </table>

或者，如果您的选项上有value属性，您可以通过值来执行此操作：

function addRow() {
  var tableBody = $('table').find("tbody");
  var trLast = tableBody.find("tr:last");
  var trNew = trLast.clone();

  const lastSelectedCountryInddex = trLast.find('select').eq(0).find('option:selected').index();
 
  const lastSelectedCountry = trLast.find('select').eq(0).val();
  
  trNew.find('select').eq(0).val(lastSelectedCountry);

  trLast.after(trNew);
}

更新：使用Select2时，必须确保在克隆之前删除Select 2-$('select').select2('destroy')-。将克隆的行插入DOM后，可以重新应用Select 2-$('select').select2()。我已经更新了代码示例以使用Select 2。

赞(0）回复(0）举报 2023-05-06

我来回答

克隆后的下拉菜单保持一个选定的选项的值，并重置第二个下拉jquery

1条答案

相关问题

热门标签

最新问答