用几个不同的元素ID更改javascript中的跨度

Question

我是新手，真的不知道如何提问。如果一开始不清楚，请原谅，但我会出示我的代码向您解释。

在我的页面上，我有一个显示的下拉列表(一个具有ID:list类别的<selector>(

我也有弹出的搜索结果。在他的结果的底部，我想显示在<selector>中选择了什么。有关信息，get_the_id()功能由CMS(WordPress(提供，以显示正确的图像或正确的标题。我只是假设，为了让它多次显示我的文本，我也必须依赖它。

<div class="listing-cat">


<i class="<?php echo $cat_icon; ?>"></i>
<span id="<?php echo get_the_ID()?>"></span>
<script type="text/javascript">
function update() {
var select = document.getElementById('list-category');
var option = select.options[select.selectedIndex];
document.getElementById('<?php echo get_the_ID()?>').innerHTML = option.text;

}            
update();
</script>    
</div>

经过几次测试，我注意到我只为第一个搜索结果显示了选定的类别，而没有为其他搜索结果显示。我想了一会儿，我对自己说，我会使用帖子的唯一ID，这样它就会被正确设置(我们看到这个PHP代码的原因(

现在什么都没有显示，但如果我进入网页的源代码，我可以看到我的PHP变量有正确的帖子ID，我不明白为什么它不起作用：

<div class="listing-cat">

<i class=""></i>
<span id="69678"></span>
<script type="text/javascript">
function update() {
var select = document.getElementById('list-category');
var option = select.options[select.selectedIndex];
document.getElementById('69678').innerHTML = option.text;

}            
update();
</script>
</div>

你有什么线索可以帮我看看我可能错过了什么吗？我需要绕圈吗？

Answer 1

JavaScript是一种事件驱动的语言。这意味着，当发生一些事情时，比如用户在<select>中选择了一个选项，就会触发一个事件。我们可以监听事件，以便在事件发生时采取行动。

在这种情况下，用户将更改<select>元素中的所选选项。因此，我们可以监听change事件

每个HTML元素都有一个名为addEventListener的方法。有了它，我们为发生在该元素上的特定事件添加了一个监听器，并附加了一个函数，该函数包含事件发生时应该发生的事情。

对于每个事件，您都会得到一个Event，其中包含有关该事件、触发该事件的元素等信息。Event对象的target属性是对触发事件的元素的引用，在本例中是我们的<select>元素。

所选选项的所选value反映在<select>元素本身的value属性中。阅读并将跨度的文本设置为select的值。

const listCategory = document.querySelector('#list-category');
const selectedCategory = document.querySelector('#selected-category');
listCategory.addEventListener('change', event => {
selectedCategory.textContent = event.target.value;
});

<select id="list-category">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<div class="listing-cat">
<i class=""></i>
<span id="selected-category">A</span>
</div>