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);
    })
  });
  
 functiontoggleOptions(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

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"/><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><formmethod="post"id="sheetForm"action="#"><inputtype="hidden"name="csrfmiddlewaretoken"value="cR9fmhJk0hhQF0FIFscTABn3DXnXMPNPAOu2cZhSwFwRfC0FleEUJnlVsqbC2I4D"><divclass="row"><divclass="m-b-30 form-group"><labelclass="col-md-4 control-label">Sheet Select Mode</label><divclass="col-md-8"><labelclass="radio-inline"><inputtype="radio"id="inlineRadio1"value="option1"name="radioInline"checked>By Name
            </label><labelclass="radio-inline"><inputtype="radio"id="inlineRadio2"value="option2"name="radioInline">By Position
            </label></div></div><tableid="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><tdclass="file-name">test-data-input-xls-mult-feb.xlsx</td><inputtype="hidden"name="filename"value="test-data-input-xls-mult-feb.xlsx"><td><selectid="select1"class="form-control input-small sheet-select"name="sheet-select-feb"><optionvalue="name 1"selected="selected" >Sheet1</option><optionvalue="index 1">1</option><optionvalue="name 2">Sheet2</option><optionvalue="index 2">2</option><optionvalue="name 3">Sheet3</option></select></td><tdclass="open"><buttontype="button"id="btnApplyAll"class="btn btn-default dropdown-toggle"data-toggle="dropdown"aria-expanded="true">Apply All Files </button></td></tr><tr><tdclass="file-name">test-data-input-xls-mult-jan.xlsx</td><inputtype="hidden"name="filename"value="test-data-input-xls-mult-jan.xlsx"><td><selectid="select2"class="form-control input-small sheet-select"name="sheet-select-jan"><optionvalue="name 1"selected="selected">Sheet1</option><optionvalue="index 1">1</option><optionvalue="name 2" >Sheet2</option><optionvalue="index 2" >2</option></select></td><td></td></tr><tr><tdclass="file-name">test-data-input-xls-mult-mar.xlsx</td><inputtype="hidden"name="filename"value="test-data-input-xls-mult-mar.xlsx"><td><selectid="select3"class="form-control input-small sheet-select"name="sheet-select-mar"><optionvalue="name 1"selected="selected" >Sheet1</option><optionvalue="index 1">1</option><optionvalue="name 2" >Sheet2</option><optionvalue="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);
   
  functionselectCheckboxstatus() {
    var selectionMode;    
    $(".clsDdPosition").prop("selectedIndex", 0);
    $(".clsDdName").prop("selectedIndex", 0);
    selectionMode = $(".rdoSelection:checked").val();
    if ("byName" === selectionMode) {
      $(".clsDdPosition").hide();
      $(".clsDdName").show();
    } elseif ("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";
    } elseif ("byPosition" === ddSelectionMode) {
      selectedValue = $("#ddSheetByPosition1").val();
      selectedClass = ".clsDdPosition";
    }    
    $(selectedClass).each(function() {
      $(this).val(selectedValue);
    });
  });
});

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"/><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><formmethod="post"id="sheetForm"action="#"><inputtype="hidden"name="csrfmiddlewaretoken"value="cR9fmhJk0hhQF0FIFscTABn3DXnXMPNPAOu2cZhSwFwRfC0FleEUJnlVsqbC2I4D"><divclass="row"><divclass="col-sm-12"><divclass="m-b-15"></div></div></div><divclass="row"><divclass="m-b-30 form-group"><labelclass="col-md-4 control-label">Sheet Select Mode</label><divclass="col-md-8"><labelclass="radio-inline"><inputtype="radio"id="inlineRadio1"value="byName"name="radioInline"class="rdoSelection">By Name
        </label><labelclass="radio-inline"><inputtype="radio"id="inlineRadio2"value="byPosition"name="radioInline"class="rdoSelection">By Position
        </label></div></div><tableid="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><tdclass="file-name">test-data-input-xls-mult-feb.xlsx</td><inputtype="hidden"name="filename"value="test-data-input-xls-mult-feb.xlsx"><td><selectid="ddSheetByName1"class="form-control input-small ddSheetByName1 clsDdName"name="sheet-select"><optionvalue="sheet1">Sheet1</option><optionvalue="sheet2">Sheet2</option></select><selectid="ddSheetByPosition1"class="form-control input-small ddSheetByPosition1 clsDdPosition"name="sheet-select"><optionvalue="index1">1</option><optionvalue="index2">2</option></select></td><tdclass="open"><buttontype="button"id="btnApplyAll"class="btn btn-default dropdown-toggle btnApplyAll"data-toggle="dropdown"aria-expanded="true">Apply All Files </button></td></tr><tr><tdclass="file-name">test-data-input-xls-mult-jan.xlsx</td><inputtype="hidden"name="filename"value="test-data-input-xls-mult-jan.xlsx"><td><selectid="ddSheetByName2"class="form-control input-small ddSheetByName2 clsDdName"name="sheet-select"><optionvalue="sheet1">Sheet1</option><optionvalue="sheet2">Sheet2</option></select><selectid="ddSheetByPosition2"class="form-control input-small ddSheetByPosition2 clsDdPosition"name="sheet-select"><optionvalue="index1">1</option><optionvalue="index2">2</option></select></td></tr><tr><tdclass="file-name">test-data-input-xls-mult-mar.xlsx</td><inputtype="hidden"name="filename"value="test-data-input-xls-mult-mar.xlsx"><td><selectid="ddSheetByName3"class="form-control input-small ddSheetByName3 clsDdName"name="sheet-select"><optionvalue="sheet1">Sheet1</option><optionvalue="sheet2">Sheet2</option></select><selectid="ddSheetByPosition3"class="form-control input-small ddSheetByPosition3 clsDdPosition"name="sheet-select"><optionvalue="index1">1</option><optionvalue="index2">2</option></select></td></tr></tbody></table></div></form>