<option> значение должно равняться вар и тянуть в вар как HTML

Question

Im пытается принять выбранное значение и .На («изменить») заселить еще один вариант со списком опций в вар

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 Вот Teh переменные

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() для вызова функции обработчика изначально.

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

Пара вещей.

Немного трудно понять, что именно вы пытаетесь сделать, поэтому немного больше контекста может быть действительно полезным. Я в основном собираюсь рассказать о том, как вы можете очистить это и сделать его немного легче работать. Надеюсь, это избавит вас от шума и позволит вам понять, где ваша настоящая проблема.

Прежде всего, ошибки:

• У вас есть опечатка, первый выбор имеет значение "funct" но связанный список опций называется func.
• У вас есть два (возможно 3?) <select> DOM элементов с одинаковыми id="queryType"

Поскольку вы создаете один-функциональность <select> это справедливо, чтобы дать ему идентификатор, как id="dependent" или что-то в этом роде. Использование id делает ваш код более удобным для чтения, чем пучок цепочки .parent().parent().children('select'). Может быть, назовите первый номер id="primary" или id="driver" или что-то в этом роде.

Это делает ваш код более специализированным и менее общим.Но иногда время/работа накладных расходов на создание общих вещей не стоит того, если вы не увидите необходимости в этом в ближайшем будущем. Вы всегда можете вернуться назад и получить общее представление, если вам нужно.

Далее, каждый раз, когда у вас много повторяющегося материала, или вы чувствуете, что (или) это скопируйте его, вам следует понять, что у вас есть возможность оптимизировать ваш код и упростить его использование и обновление , Например, вместо длинных строковых объектов со строгим html (также в любое время, когда вы вынуждены использовать строчный html, вы должны остановиться на секунду и подумать о том, чтобы делать что-то по-другому), вы можете посмотреть на них и сказать: «О, все они выглядят очень похожими, хо, могу ли я сделать этот код более удобным для работы? "

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 болтовни, вы должны быть в состоянии сделать что-то вроде ...

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

    alert("this is hapenin") 
}); 

Там больше работы предстоит сделать вокруг убедившись, что вы не пытаетесь делать что-то с помощью undefined vars или whatnot, но что-то подобное должно работать.