Jquery Select Option By Text Not Working Properly

In my code there are three select elements (one for each file) with 3 or 4 options each. I have added one Apply All button on the row having first file. If an user selects the she

Solution 1:

This could meet your requirements:

$('#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>

Solution 2:

$(document).ready(function() {

  // Default select mode of sheet
  $(".rdoSelection[value='byName']").prop("checked", true);
   
  function selectCheckboxstatus() {
    var selectionMode;    
    $(".clsDdPosition").prop("selectedIndex", 0);
    $(".clsDdName").prop("selectedIndex", 0);
    selectionMode = $(".rdoSelection:checked").val();
    if ("byName" === selectionMode) {
      $(".clsDdPosition").hide();
      $(".clsDdName").show();
    } else if ("byPosition" === selectionMode) {
      $(".clsDdPosition").show();
      $(".clsDdName").hide();
    }
  }
  
  selectCheckboxstatus();
  
  $(".rdoSelection").on("click", function(e) {
    selectCheckboxstatus();
  });

  $(".btnApplyAll").on("click", function(e) {
    var selectedValue, selectedClass, ddSelectionMode;
    ddSelectionMode = $(".rdoSelection:checked").val();     if ("byName" === ddSelectionMode) {
      selectedValue = $("#ddSheetByName1").val();
      selectedClass = ".clsDdName";
    } else if ("byPosition" === ddSelectionMode) {
      selectedValue = $("#ddSheetByPosition1").val();
      selectedClass = ".clsDdPosition";
    }    
    $(selectedClass).each(function() {
      $(this).val(selectedValue);
    });
  });
});

<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="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="byName" name="radioInline" class="rdoSelection">By Name
        </label>
        <label class="radio-inline">
          <input type="radio" id="inlineRadio2" value="byPosition" name="radioInline" class="rdoSelection">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="ddSheetByName1" class="form-control input-small ddSheetByName1 clsDdName" name="sheet-select">
              <option value="sheet1">Sheet1</option>
              <option value="sheet2">Sheet2</option>
            </select>
            <select id="ddSheetByPosition1" class="form-control input-small ddSheetByPosition1 clsDdPosition" name="sheet-select">
              <option value="index1">1</option>
              <option value="index2">2</option>
            </select>
          </td>
          <td class="open">
            <button type="button" id="btnApplyAll" class="btn btn-default dropdown-toggle btnApplyAll" 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="ddSheetByName2" class="form-control input-small ddSheetByName2 clsDdName" name="sheet-select">
              <option value="sheet1">Sheet1</option>
              <option value="sheet2">Sheet2</option>
            </select>
            <select id="ddSheetByPosition2" class="form-control input-small ddSheetByPosition2 clsDdPosition" name="sheet-select">
              <option value="index1">1</option>
              <option value="index2">2</option>
            </select>
          </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="ddSheetByName3" class="form-control input-small ddSheetByName3 clsDdName" name="sheet-select">
              <option value="sheet1">Sheet1</option>
              <option value="sheet2">Sheet2</option>
            </select>
            <select id="ddSheetByPosition3" class="form-control input-small ddSheetByPosition3 clsDdPosition" name="sheet-select">
              <option value="index1">1</option>
              <option value="index2">2</option>
            </select>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</form>