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

此选定的选项值应更改/填充最后的选择选项

                                        <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 这是变量

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对象的全局变量和全局属性冲突，在您的示例中，变量location正在使网页重定向，因为window.locatoin将重定向该网页。
最初使用.change()方法调用处理函数。

＆＃13;

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();

＆＃13;

<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>

＆＃13;

Answer 2

一些事情。

有点难以理解你正在尝试做什么，所以更多的背景可能真的很有帮助。我主要谈论如何清理它并使其更容易使用。希望这可以避免一些噪音，让你找出真正的问题所在。

首先，错误：

您有拼写错误，第一个选项的值为"funct"，但相关的选项列表名为func。
您有两个（可能是3？）<select>个DOM元素具有相同的id="queryType"

由于您正在创建单一功能<select>，因此可以为其提供类似id="dependent"之类的ID或类似内容。使用id使得代码比一堆链接.parent().parent().children('select')类型的东西更容易阅读。也许可以拨打第一个id="primary"或id="driver"或其他内容。

这使您的代码更专业，更不通用。但有时候，如果你在不久的将来不再需要它，那么制作通用产品的时间/工作开销并不值得。如果需要，您可以随时返回并通用 - 如果需要的话。

接下来，每当你重复了很多东西，或者你想要（或者是）复制粘贴时，它应该让你知道你有机会优化你的代码并使它更容易使用和更新。例如，代替带有字符串化html的冗长字符串对象（也是任何时候你被迫使用字符串化的html，你应该停一秒钟并考虑做不同的事情），你可以看看它们并说，＆＃34;哦，这些都看起来非常相似，我可以让这个代码更容易使用吗？＆＃34;

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

然后，当您需要使用它们而不是字符串化HTML时，您实际上可以自己创建DOM元素。我没有依赖我的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，添加/删除元素等等。但是假设上述作品，你最终会得到：

<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>

所以，在所有这些jibber jabber之后，你应该能够做类似的事情......

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

    alert("this is hapenin")
});

要确保你不要尝试使用undefined vars或诸如此类的东西，还有更多的工作要做，但这样的事情应该有效。

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

2 个答案: