Функция JS с двумя аргументами, ссылающаяся на разные объекты

Question

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

В основном, у меня есть два шаблона, настроенных в HTML, для двух полей выбора, которые будут повторно использоваться довольно много раз по форме. то у меня есть функция, которая называется Onchange для выбора 1, и изменит то, что видно в select 2, мне удалось сопоставить select 1 с (этим), но я совершенно не понимаю, как ссылаться на вторую ,

function myFunction(selectObject) 
 
{ 
 
    if (selectObject.value == 'option1') 
 
    { 
 
     //code to reference Select2 here 
 
     option3.disabled = true; 
 
     option3.style.display = "none"; 
 
    } 
 
}

<template id="Select1"> 
 
    <select name="Select1" onchange="myFunction(this)"> 
 
     <option value="option">option</option> 
 
     <option value="option1">option1</option> 
 
     <option value="option2">option2</option> 
 
    </select> 
 
</template> 
 

 
<template id="Select2"> 
 
    <select name="Select2" > 
 
     <option value="option3">option</option> 
 
     <option value="option4">option1</option> 
 
     <option value="option5">option2</option> 
 
    </select> 
 
</template>

спасибо за любую помощь!

Answer 1

В целом вам необходимо связаться с events, dom query API и, возможно, CSS selectors.

Если вы используете шаблоны, вам нужно искать внутри content собственности соответствующего шаблона:

let t1 = document.querySelector('#Select1'); 
let t2 = document.querySelector('#Select2'); 

// there are many ways how to select an element, here simple element selector is used 
let select1 = t1.content.querySelector('select'); 
let select2 = t2.content.querySelector('select'); 
let option3 = t1.content.querySelector('[value=option3]'); 

// add event listener is preferred to your `onchange` attribute binding 
select1.addEventListener('change', function() { 
     // modify select2 here 
     option3.disabled = true; 
     option3.style.display = "none"; 
}); 

Answer 2

Что-то вроде этого? Я не уверен, почему вы используете теги шаблонов.

function myFunction() 
 
{ 
 
    var select1 = document.querySelector("#Select1>select"); 
 
    var select2 = document.querySelector("#Select2>select"); 
 
    
 
    var option3Visible = select1.value != 'option1'; 
 
    
 
    var option3 = select2.querySelector("option[value='option3']"); 
 
    option3.disabled = !option3Visible; 
 
    option3.style.display = option3Visible ? "inline" : "none";  
 
}

<div id="Select1"> 
 
    <select name="Select1" onchange="myFunction()"> 
 
     <option value="option0">option0</option> 
 
     <option value="option1">option1</option> 
 
     <option value="option2">option2</option> 
 
    </select> 
 
</div> 
 

 
<div id="Select2"> 
 
    <select name="Select2" > 
 
     <option value="option3">option3</option> 
 
     <option value="option4">option4</option> 
 
     <option value="option5">option5</option> 
 
    </select> 
 
</div>