javascript - jquery 通过文本选择选项无法正常工作

Question

在我的代码中，有三个 select 元素(每个文件一个)，每个元素有 3 或 4 个选项。我在具有第一个文件的行上添加了一个“全部应用”按钮。

如果用户选择第一个文件上的工作表名称并单击全部应用按钮，则必须在所有文件上选择相同的工作表。如果任何文件中缺少工作表，则必须显示“工作表不匹配”之类的警报。这是我尝试过的，

<form method="post" id="sheetForm" action="#"><input type="hidden" name="csrfmiddlewaretoken" value="cR9fmhJk0hhQF0FIFscTABn3DXnXMPNPAOu2cZhSwFwRfC0FleEUJnlVsqbC2I4D">
            <div class="row">
              <div class="col-sm-12">
                <div class="m-b-15">

                </div>
              </div>
            </div>

            <div class="row">
              <div class="m-b-30 form-group">
                <label class="col-md-4 control-label">Sheet Select Mode</label>
                <div class="col-md-8">
                  <label class="radio-inline">
                      <input type="radio" id="inlineRadio1" value="option1" name="radioInline">By Name
                  </label>
                  <label class="radio-inline">
                      <input type="radio" id="inlineRadio2" value="option2" name="radioInline">By Position
                  </label>
                </div>
              </div>
              <table id="tblPreview" class="table table-hover dt-responsive nowrap" cellspacing="0" width="100%">
                <thead>
                  <tr>
                    <th>File Name</th>
                    <th>Sheet Name</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody>

                  <tr>
                    <td class="file-name">test-data-input-xls-mult-feb.xlsx</td>
                    <input type="hidden" name="filename" value="test-data-input-xls-mult-feb.xlsx">
                    <td>
                      <select id="select1" class="form-control input-small sheet-select" name="sheet-select">


                          <option value="name 1" selected="selected" >Sheet1</option>

                        <option value="index 1">1</option>


                          <option value="name 2">Sheet2</option>

                        <option value="index 2">2</option>

                    </select>
                    </td>
                    <td class="open">

                      <button type="button" id="btnApplyAll" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Apply All Files </button>

                    </td>

                  </tr>


                  <tr>
                    <td class="file-name">test-data-input-xls-mult-jan.xlsx</td>
                    <input type="hidden" name="filename" value="test-data-input-xls-mult-jan.xlsx">
                    <td>
                      <select id="select2" class="form-control input-small sheet-select" name="sheet-select">


                          <option value="name 1" selected="selected">Sheet1</option>

                        <option value="index 1">1</option>


                          <option value="name 2" >Sheet2</option>

                        <option value="index 2" >2</option>

                    </select>
                    </td>
                    <td>

                    </td>

                  </tr>


                  <tr>
                    <td class="file-name">test-data-input-xls-mult-mar.xlsx</td>
                    <input type="hidden" name="filename" value="test-data-input-xls-mult-mar.xlsx">
                    <td>
                      <select id="select3" class="form-control input-small sheet-select" name="sheet-select">


                          <option value="name 1" selected="selected" >Sheet1</option>

                        <option value="index 1" >1</option>

                          <option value="name 2" >Sheet2</option>

                        <option value="index 2">2</option>

                    </select>
                    </td>
                    <td>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </form>

相关的js代码如下:

$('#btnApplyAll').on('click', function(){
    // get the selected option of first select
    var noSuchOption = false;
    var selectedOption = $('#select1').find(":selected").text();
    var selects = $('select[name="sheet-select"]');
    $('select[name="sheet-select"] option[selected="selected"]').removeAttr('selected');

    $.each(selects, function(index, select) {
      var opts = $(select).find('option').filter(function(){ return this.text == selectedOption;});
      if(opts.length < 1) {
        noSuchOption = true;
        return false;
      }
    });

    if(noSuchOption) {
      notify_long("Selected sheet doesn't exists in all files!", 'danger');
    } else {
        $('select[name="sheet-select"] option').filter(function(){
            return this.text == selectedOption;
        }).attr('selected', true);
    }
  });

这段代码在单击 3 或 4 次按钮的初始阶段有效，但是如果我在中间阶段选择 file1 上的sheet1、file2 上的sheet2、file3 上的sheet1 之后单击“应用全部”按钮，则无法更改。此时，单选按钮之间的切换也无法显示相关选项。

jsFiddle

Answer 1

这可以满足您的要求:

$('#btnApplyAll').on('click', function(){
    var noSuchOption = false;
    var selectedOption = null;
    $('select.sheet-select').each(function(index) {
      if (noSuchOption) return;
      if (index == 0) {
        selectedOption = $(this).val();
        return;
      }
      if ($(this).find('option[value="' + selectedOption + '"]').length === 0) {
        noSuchOption = true;
        alert("File: "+$(this).parent().prev().val() +" have not selected sheet", 'danger');
        return;
      }
      $(this).val(selectedOption);
    })
  });
  
 function toggleOptions(e) {
    var toggle = $(this).attr('id') == 'inlineRadio1' ? 'name' : 'index';
    $('select.sheet-select option').hide()
    $('select.sheet-select').each(function() {
      let optsToShow = $(this).find('option[value^="'+ toggle +'"]');
      optsToShow.show();
      $(this).val(optsToShow.first().attr('value'));
    });
  }

  $('#inlineRadio1, #inlineRadio2')
    .change(toggleOptions) 
    .first().change(); // trigger change to initialize

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="sheetForm" action="#">
   <input type="hidden" name="csrfmiddlewaretoken" value="cR9fmhJk0hhQF0FIFscTABn3DXnXMPNPAOu2cZhSwFwRfC0FleEUJnlVsqbC2I4D">
   <div class="row">
      <div class="m-b-30 form-group">
         <label class="col-md-4 control-label">Sheet Select Mode</label>
         <div class="col-md-8">
            <label class="radio-inline">
            <input type="radio" id="inlineRadio1" value="option1" name="radioInline" checked>By Name
            </label>
            <label class="radio-inline">
            <input type="radio" id="inlineRadio2" value="option2" name="radioInline">By Position
            </label>
         </div>
      </div>
      <table id="tblPreview" class="table table-hover dt-responsive nowrap" cellspacing="0" width="100%">
         <thead>
            <tr>
               <th>File Name</th>
               <th>Sheet Name</th>
               <th>Actions</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td class="file-name">test-data-input-xls-mult-feb.xlsx</td>
               <input type="hidden" name="filename" value="test-data-input-xls-mult-feb.xlsx">
               <td>
                  <select id="select1" class="form-control input-small sheet-select" name="sheet-select-feb">
                     <option value="name 1" selected="selected" >Sheet1</option>
                     <option value="index 1">1</option>
                     <option value="name 2">Sheet2</option>
                     <option value="index 2">2</option>
                     <option value="name 3">Sheet3</option>
                  </select>
               </td>
               <td class="open">
                  <button type="button" id="btnApplyAll" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Apply All Files </button>
               </td>
            </tr>
            <tr>
               <td class="file-name">test-data-input-xls-mult-jan.xlsx</td>
               <input type="hidden" name="filename" value="test-data-input-xls-mult-jan.xlsx">
               <td>
                  <select id="select2" class="form-control input-small sheet-select" name="sheet-select-jan">
                     <option value="name 1" selected="selected">Sheet1</option>
                     <option value="index 1">1</option>
                     <option value="name 2" >Sheet2</option>
                     <option value="index 2" >2</option>
                  </select>
               </td>
               <td>
               </td>
            </tr>
            <tr>
               <td class="file-name">test-data-input-xls-mult-mar.xlsx</td>
               <input type="hidden" name="filename" value="test-data-input-xls-mult-mar.xlsx">
               <td>
                  <select id="select3" class="form-control input-small sheet-select" name="sheet-select-mar">
                     <option value="name 1" selected="selected" >Sheet1</option>
                     <option value="index 1">1</option>
                     <option value="name 2" >Sheet2</option>
                     <option value="index 2">2</option>
                  </select>
               </td>
               <td>
               </td>
            </tr>
         </tbody>
      </table>
   </div>
</form>