user3328590 user3328590 - 2 months ago 5
Javascript Question

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

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

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>

Comments