Question

我几乎是JS的新手，并且正在一个小网页上自学一点。我觉得以前会回答这个问题，但我不知道如何更好地发现它...抱歉！

基本上，我在HTML中设置了两个模板，用于两个选择框，它们将在整个表单中重复使用几次。然后我有一个名为Onchange for select 1的函数，并且会改变select 2中可见的内容，我设法用（this）引用select 1，但我完全不知道如何引用第二个。

＆＃13;

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

＆＃13;

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

＆＃13;

感谢您的帮助！

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>

JS函数有两个参数，引用不同的对象

2 个答案: