Question

如何将 select 选项与 array 项相互关联并在单击按钮时更改内容？

我想使用选择选项和按钮动态更改 div 的内容。我想显示的单词排列在一个数组中。

这是我的代码：

function myCall() {
  var dBox = document.getElementById('displayBox');
  var msg = ["Good", "Fine", "Helpful", "Fantastic"];
  dBox.innerHTML = `${msg[2]}!`;
}

#displyBox {
  color: #fff;
  font-size: 24px;
  text-align: center;
  background-color: #00d500;
  border-radius: 5px;
  padding: 20px;
  font-weight: 800;
  margin-bottom: 14px;
}

<div id="displayBox">Change Words!</div>
<select>
  <option>Good</option>
  <option>Fine</option>
  <option selected>Helpful</option>
  <option>Fantastic</option>
</select>
<button type="button" onclick="myCall()">Change Word</button>

Answer 1

直接在您的选择框中使用 Owner 事件
不要使用 HTML 内联 "change" 处理程序。 JS 和 CSS 应该在各自的标签/文件中。

on*

const EL_box = document.querySelector("#box");
const EL_words = document.querySelector("#words");

const populateBox = () => {
  EL_box.innerHTML = EL_words.value;
};

EL_words.addEventListener("change", populateBox); // on change
populateBox();                                    // on init

#box {
  color: #fff;
  font-size: 24px;
  text-align: center;
  background-color: #00d500;
  border-radius: 5px;
  padding: 20px;
  font-weight: 800;
  margin-bottom: 14px;
}

如果你真的需要一个按钮：

<div id="box">Change Words</div>
<select id="words">
  <option>Good</option>
  <option>Fine</option>
  <option selected>Helpful</option>
  <option>Fantastic</option>
</select>

const EL_box = document.querySelector("#box");
const EL_words = document.querySelector("#words");
const EL_change = document.querySelector("#change");

const populateBox = () => {
  EL_box.innerHTML = EL_words.value;
};

EL_change.addEventListener("click", populateBox); // on click
populateBox();                                    // on init

#box {
  color: #fff;
  font-size: 24px;
  text-align: center;
  background-color: #00d500;
  border-radius: 5px;
  padding: 20px;
  font-weight: 800;
  margin-bottom: 14px;
}

Answer 2

这是工作示例：

首先，将 value 属性与标签一起使用很重要，例如：

<div id="displyBox">Change Words!</div>

 <select id="selectbox">
  <option value="Good">Good</option>
  <option value="Fine">Fine</option>
  <option value="Helpful" selected>Helpful</option>
  <option value="Fantastic">Fantastic</option>
</select>
  
<button type="button" id="buttonChange">Change Word</button>

我更喜欢使用 addEventListener 而不是“onclick”属性。它划分了您的视图和业务逻辑层，使代码更加干练和清晰:)

那么，看看js：

const displyBox = document.getElementById('displyBox')

const buttonChange = document.getElementById('buttonChange')

const selectbox = document.getElementById('selectbox')

buttonChange.addEventListener('click', () => {
  displyBox.innerHTML=selectbox.value
})

将每个重要的 html-node 链接到 js 常量。将 eventListener 添加到您的 html-button 节点并在内部传递回调函数。回调函数根据实际的选择框值更改您需要的innerHTML 属性标签。

这是 codepen 的工作示例： https://codepen.io/zaslavskij/pen/mdWPMRg

Answer 3

您需要像这样在您的选择中添加一个 id...

function myCall() {
    var dBox = document.getElementById('displyBox');
    var msg = ["Good", "Fine", "Helpful", "Fantastic"];
    dBox.innerHTML = `${msg[document.getElementById('select').selectedIndex]}!`;
}

#displyBox {
    color: #fff;
    font-size: 24px;
    text-align: center;
    background-color: #00d500;
    border-radius: 5px;
    padding: 20px;
    font-weight: 800;
    margin-bottom: 14px;
}

<div id="displyBox">Change Words!</div>
<select id = "select">
<option>Good</option>
<option>Fine</option>
<option>Helpful</option>
<option>Fantastic</option>
</select>
<button type="button" onclick="myCall()">Change Word</button>

Answer 4

您需要为您的选项增加价值，例如 <option value=0>Good</option>
然后您需要从 <select> 获取值以在按钮点击时进行更改。检查以下代码，如 document.getElementById('vals').value
根据该值，您需要从单词列表数组中选择元素的索引，例如 ${msg[selectedVal]}

function myCall() {
var dBox = document.getElementById('displyBox');
let selectedVal = document.getElementById('vals').value
var msg = ["Good", "Fine", "Helpful", "Fantastic"];
dBox.innerHTML = `${msg[selectedVal]}!`;
}

<div id="displyBox">Change Words!</div>
<select id="vals">
<option value=0>Good</option>
<option value=1>Fine</option>
<option selected  value=2>Helpful</option>
<option  value=3>Fantastic</option>
</select>
<button type="button" onclick="myCall()">Change Word</button>

将选择选项与数组项相互关联

4 个答案: