Append options to select box depend on extracted part from array

One way to achieve above is to filter the options from allData select-box and get only those option which has the value which user has selected using value*="yourvalue".

Then , onces you get the options you need to know which select-box has been change so that we can get required value only when we do split and pass required index .

Lastly , we need to loop through the options which we have got from filtering select-box .Suppose user select Master so there are Master in many places so to avoid getting data from all option i have check the value of select with the first select-box as well if matches apppend only those options.

Demo Code :

$('select').change(function() {
//get value
  var name = $(this).val();
  //filter option and get only option which has the value which user has slected
  var s = $("#allData").find('option').filter('[value*=' + name + ']').each(function(ele) {
    return $(this).val();
  });
  var module_namess;
  var index;
  //check the id of select-box
  if ($(this).attr("id") == "moduleName") {
    module_namess = "SubModuleName";
    index = 2;//set index 
  } else if ($(this).attr("id") == "SubModuleName") {
    name = $("#moduleName").val()
    module_namess = "programeName"
    index = 3
  }

  $("#" + module_namess).empty()
  $('#' + module_namess).append("<option >Select one</option>")
  var valuess = ''
  //loop through options
  for (var i = 0; i < s.length; i++) {
    valuess += $(s[i]).val()
    //if first value is same
    if ($(s[i]).val().split(";")[1] == name) {
        var sub_value = $(s[i]).val().split(";")[index]//get the value 
      var newOption = "<option value='" + sub_value + "'>" + sub_value + "</option>";
      $('#' + module_namess).append(newOption);//append
    }
  }
  $('#splitedOptions').val(valuess);

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>ModuleName:</label>
<select class="moduleName" id="moduleName">
  <option value="HR">HR</option>
  <option value="Marketing">Marketing</option>
  <option value="Purchase">Purchase</option>
  <option value="Finance">Finance</option>
</select><br><br>

<label>SubModuleName:</label>
<select class="SubModuleName" id="SubModuleName"></select><br><br>

<label>ProgrameName:</label>
<select class="programeName" id="programeName"></select><br><br>

<label>All Data:</label>
<select class="allData" id="allData">
  <option value="userName;HR;Transactions;EmployeeMaster">Option1</option>
  <option value="userName;HR;Master;EmployeeMaster">Option2</option>
  <option value="userName;Marketing;Master;MarketingMaster">Option3</option>
  <option value="userName;HR;Reports;HRReports">Option4</option>
  <option value="userName;Purchase;PurchaseOrders;LPO">Option5</option>
  <option value="userName;Purchase;PurchaseOrders;IPO">Option6
    <option value="userName;Finance;Master;FinanceMasterPrograme">Option7</option>
    <option value="userName;Finance;Reports;FinanceReportsPrograme">Option8</option>
</select><br><br>

<label>splited Options:</label>
<textarea id="splitedOptions" name="splitedOptions"></textarea>

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top