javascript - 值应等于 var 并将 var 作为 html 引入

Question

我尝试获取所选值并 .on('change') 使用 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>

此选择选项应根据上面的新选择进行更新。

                                        <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

只要有一个对象，它将保存所有变量作为键的值，并且键将与选项的值(标记)映射:

记下一些事情:

• 不要与 window 对象的全局变量和全局属性冲突，在您的示例中，变量 location 使网页重定向为 window.locatoin 将重定向网页。
• 首先使用 .change() 方法调用处理函数。

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>