<option> 值应等于 var 并将 var 拉入 html

Question

我正在尝试获取 selected 值并 .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 选项应根据上面的新 selection 进行更新。

                                        <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

只要有一个对象，它将保存所有变量作为键的值，键将映射到选项的值(markup):

记下几件事：

不要与 window 对象的全局变量和 gobal 属性冲突，在您的示例中，变量 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>

Answer 2

几件事。

要准确理解您要做什么有点困难，因此多了解一些上下文会很有帮助。我将主要讨论如何清理它并使其更易于使用。希望这可以消除一些干扰，让您找出真正的问题所在。

首先，错误：

您打错了，第一个 select 的值为 "funct" 但相关的选项列表名为 func.
您有两个（也许是 3 个？）<select> DOM 个元素具有相同的 id="queryType"

由于您创建的是单一功能 <select>，所以给它一个像 id="dependent" 或类似的 ID 是公平的。使用 id 使您的代码比一堆链接 .parent().parent().children('select') 类型的东西更容易阅读。也许叫第一个 id="primary" 或 id="driver" 或什么的。

这使您的代码更专业化，更不通用。但有时 time/work 如果您在不久的将来看不到对它的需求，那么使事物通用化的开销是不值得的。如果需要，您可以随时返回并对其进行通用化。

接下来，每当你重复很多东西，或者你想（或正在）复制粘贴时，它应该提示你，你有机会优化你的代码并使其更易于使用和更新。例如，除了使用字符串化 html 的冗长字符串对象（还有任何时候你被迫使用字符串化 html，你应该停下来考虑以不同的方式做事），你可以看对他们说，"Oh, these all look really similar, ho can I make this code easier to work with?"

var optsConfig = {
    source: ['Sales', 'Marketing', 'Dev'],
    department: 'Sales', 'Marketing', 'Dev'],
    func: ['Seattle', 'Los Angeles', 'San Francisco', 'Bellevue'],
    // ...
};

然后当你需要使用它们时，你实际上可以自己制作 DOM 元素而不是字符串化 HTML 。我不喜欢我的 jQuery，所以我通常只是按照本机方式做事，希望这能消除一些 jQuery 阻碍你的事情。

// Let's say this is the value selected by the user in the first dropdown

function appendOptionEls(selectEl, options) {
    options.forEach(function(name) {
        var el = document.createElement('option');
        el.value = name.toLowerCase();
        el.textContent = name;
        selectEl.appendChild(el);
    });
}

function onDriverChange(driverSelection) {
    var dependentOptions = optsConfig[driverSelection];

    var secondSelect = $('select#dependent');
    secondSelect.empty();

    appendOptionEls(secondSelect, dependentOptions);
}

不确定 ^ 是否完美 jQuery（已经有一段时间了），但类似的东西可以更轻松地修改您的 optsConfig、add/remove 元素，等。但是假设上面的方法有效，你最终会得到类似的东西：

<select id="dependent">
    <option value="seattle">Seattle</option>
    <option value="los angeles">Los Angeles</option>
    <option value="san francisco">San Francisco</option>
    <option value="bellevue">Bellevue</option>
</select>

所以说了那么多废话之后，你应该可以做类似...

$('#driver').on('change', function(e) {
    var driverSelection = $(this).val();
    onDriverChange(driverSelection);

    alert("this is hapenin")
});

还有更多工作要做，以确保您不会尝试使用 undefined 变量或诸如此类的东西，但像这样的事情应该可行。

<option> 值应等于 var 并将 var 拉入 html

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

javascript

jquery

var

option