<option> value should equal var and pull in var as html

Question

Im trying to take the selected value and .on('change') populate another option with the option list in the var

html

<div class="filterContainer populated ms-Grid-col ms-u-sm8 ms-u-smPush2">
                                <div class="ms-Toggle">

                                     <label class="ms-Toggle-field dimension" for="demo-toggle-3">
                                        <span class="ms-Label displayInline ms-Label--off ms-and">AND</span>
                                        <span class="ms-Label displayInline ms-Label--on ms-or">OR</span>
                                     </label>
                                </div>
enter code here

                                <div class="ms-Grid-col ms-u-sm9 ms-u-md9 ms-u-lg9  bgYellow">
                                    <div tabindex="0" class="ms-Dropdown">
                                        <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--caretDown"></i>
enter code here

This selected option value should change/populate the last select options

                                        <select class="ms-Dropdown-select dimensionSelection" id="queryType">
                                            <option value="source" data-filter-top="source">source</option>
                                            <option value="departments" data-filter-top="department">department</option>
                                            <option value="funct" data-filter-top="function">function</option>
                                        </select>
                                    </div>
                                    <div tabindex="0" class="ms-Dropdown">
                                        <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--caretDown"></i>

                                        <select class="ms-Dropdown-select" id="queryType">
                                            <option>Equals</option>
                                            <option>Not Equals</option>
                                        </select>
                                    </div>
                                    <div tabindex="0" class="ms-Dropdown">
                                        <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--caretDown"></i>

This select option should be updated based on the new selection from above.

                                        <select class="ms-Dropdown-select selectionBase" id="queryType">
                                            <option class="">THIS OPTOIN SHOULD CHANGE</option>
                                        </select>
                                    </div>
                                </div>
                           </div>
                        </div>';

Jquery Here are teh variables

var source = '<option>Sales</option>\
                  <option>Marketing</option>\
                  <option>Dev</option>';

    var department = '<option>Sales</option>\
                      <option>Marketing</option>\
                      <option>Dev</option>';

    var func = '<option>Seattle</option>\
                      <option>Los Angeles</option>\
                      <option>San Francisco</option>\
                      <option>Bellevue</option>';

    var location = '<option>Seattle</option>\
                      <option>Los Angeles</option>\
                      <option>San Francisco</option>\
                      <option>Bellevue</option>';

    var domain = '<option>Seattle</option>\
                      <option>Los Angeles</option>\
                      <option>San Francisco</option>\
                      <option>Bellevue</option>';


    var isinternal = '<option>Yes</option>\
                      <option>No</option>';

$('div').on('change','select.dimensionSelection', function(e){
    $(this).parent().parent().find(".selectionBase").html($(this).attr('value'));
    alert("this is hapenin")
});

Answer 1

Just have an object which will hold all the variables as value of the keys and keys will be mapped with the value(markup) of the option:

Make note of few things:

• Do not conflict with global variables and gobal properties of window object, in your example, variable location was making webpage to redirect as window.locatoin will redirect the webpage.
• Use .change() method to invoke the handler function initially.

var source = '<option>Sales</option>\
                  <option>Marketing</option>\
                  <option>Dev</option>';

var department = '<option>Sales</option>\
                      <option>Marketing</option>\
                      <option>Dev</option>';

var func = '<option>Seattle</option>\
                      <option>Los Angeles</option>\
                      <option>San Francisco</option>\
                      <option>Bellevue</option>';

var locationElem = '<option>Seattle</option>\
                      <option>Los Angeles</option>\
                      <option>San Francisco</option>\
                      <option>Bellevue</option>';

var domainName = '<option>Seattle</option>\
                      <option>Los Angeles</option>\
                      <option>San Francisco</option>\
                      <option>Bellevue</option>';


var isinternal = '<option>Yes</option>\
                      <option>No</option>';
var obj = {
  source: source,
  department: department,
  func: func,
  location: locationElem,
  domain: domainName,
  isinternal: isinternal
};

$('select.dimensionSelection').on('change', function() {
  if (this.value) {
    $(".selectionBase").html(obj[this.value]);
  }
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select class="ms-Dropdown-select dimensionSelection" id="queryType">
  <option value="source" data-filter-top="source">source</option>
  <option value="department" data-filter-top="department">department</option>
  <option value="func" data-filter-top="function">function</option>
</select>
<div tabindex="0" class="ms-Dropdown">
  <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--caretDown"></i>
</div>
<select class="ms-Dropdown-select selectionBase">
  <option class="">THIS OPTOIN SHOULD CHANGE</option>
</select>